Next.js
導入
まずはパッケージのインストールとスクリプトコマンドの追記をおこないます。
yarn add next react react-dompackage.jsonにスクリプトコマンドを追記します
package.json:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}静的生成とサーバーサイドレンダリング
Next.jsではページはreact component でありそれぞれのページはファイル名によってルーティングされます。例えばpages/about.jsを以下の内容で作成した場合、http://localhost:3000/aboutでabout.jsの内容が表示されます。
mkdir pages && cd pages && touch index.js
/pages/index.js:
function HomePage(){
return(
<div>
<h1>Welcome to Next.js</h1>
</div>
)
}
export default HomePage/pages/about.js:
function About(){
return(
<div>
<h1>About</h1>
</div>
)
}
export default Aboutナビゲーションバーの作成
ここまで作成したふたつのページ間を遷移できるようにナビゲーションを作成します。componentsディレクトリ配下にNavbar.jsを作成しreact component を記述します。その際、クライアントサイドでの遷移はnext/linkからエクスポートされているLinkコンポーネントを使用します。
/components/Navbar.js:
import Link from "next/link";
const Navbar = () => {
return (
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About</a>
</Link>
</li>
</ul>
)
}
export default Navbar;ナビゲーションバーを各ページに表示させるには、pagesディレクトリ配下の各ファイルでNavbarコンポーネントを読み込み描画します。
/pages/index.js:
import Navbar from '../components/Navbar'
function HomePage() {
return (
<>
<Navbar />
<div>
<h1>Welcome to Next.js</h1>
</div>
</>
)
}
export default HomePage/pages/about.js:
import Navbar from "../components/Navbar";
function About() {
return (
<>
<Navbar />
<div>
<h1>About</h1>
</div>
</>
);
}
export default About;ここまででNextjsによるふたつのページを遷移するアプリケーションが出来ました。
ナビゲーションバーを共通レイアウトとして使用する
ただしこのままではページごとにNavbarコンポーネントを読み込む必要があるので共通のレイアウトとして利用できるようにします。まずLayoutコンポーネントを作成します。
/components/layout.js:
import Navbar from "../components/Navbar";
function About() {
return (
<>
<Navbar />
<div>
<h1>About</h1>
</div>
</>
);
}
export default About;Next.jsは、Appコンポーネントを使用してページを初期化します。pagesディレクトリに_app.jsを作成することによって、これをオーバーライドして、ページの初期化を制御できます。（開発サーバーを再スタートする必要があります）
/pages/_app.js
import Layout from '../components/layout'
export default function MyApp({ Component }) {
return (
<Layout>
<Component />
</Layout>
)
}これに伴い各ページのコンポーネントに変更を加えます。各ページのコンポーネントには中身の部分のみを記述します。このコンポーネントがMyAppコンポーネントに渡りLayoutコンポーネントにはchildrenとして渡されます。
/pages/index.js
function HomePage() {
return (
<div>
<h1>Welcome to Next.js</h1>
</div>
)
}
export default HomePage/pages/about.js
function About() {
return (
<div>
<h1>About</h1>
</div>
);
}
export default About;これで共通レイアウトを使用する前と同様の振る舞いをおこなうように出来ました。