NextJSが気になっていたので、入門的にブログをつくってみました。ちなみに作ったのはこのブログ。NextJSのブログはテンプレートがたくさんあるので、ブログが欲しいだけだったらテンプレートをそのまま使ったほうが楽ですし、WordPressなんかを採用したほうが楽です。いざ作成する場合にも、入門的にブログを作る工程を解説している記事が多く結構困らないはずでした。

Next.jsとは

軽くNext.jsについて。Next.jsはREACTベースのフレームワークでSSRとSSGの両方をサポートしています。SSRとSSGともに、サーバー側でHTMLを生成し返却しますが、SSGはビルド時にAPI実行され静的サイトが構築されるため、企業サイトやブログなどデータが動かないサイトに向いているとされています。SSGはほかにも、Gatsby(REACTベース)、Hugo(Goベース)、Nuxt.js(Vue)などがあります。

13.4で新機能が追加されたらしい。

ほとんどの記事がpage routerを使用したコーディングの開設をしていますが、13.4よりpage routerに変わりAPP Routerというルーティング機能が安定板としてリリースされているようで、Next.jsを知らない私にとっては、思っていたよりも苦労しました。

ざっくり一覧

• App Directory: ルーティングとレイアウトの改善。
• Turbopack: Rust ベースの Webpack の代替品で、高速なモジュールバンドラー。
• Server Components: サーバーコンポーネントを使用して、最も動的なアプリケーションをサポート。
• Streaming: UI の単位でストリーミングし、瞬時の読み込み状態を表示。
• next/image: ネイティブブラウザの遅延読み込みを使用して、より高速に画像を読み込むことができます。
• @next/font: ゼロレイアウトシフトで自動的にホストされるフォントを提供する新しいフォントコンポーネント。
• next/link: 自動的に タグを生成するように API を簡素化。

Page Router

概要

Page Routerは、ファイルシステムベースのルーターで、pageディレクトリ内の.js、.jsx、.tsxを配置し、それがルートになります。たとえば、

1pages
2┣article.tsx
3┗about.tsx

のような構造の場合は、

1https://[サーバーのアドレス]/article
2https://[サーバーのアドレス]/about

のようなURLになります。

getStaticProps

サーバーサイドで動的なルートを生成する場合には、getStaticPropsを使用します。

1export default function Blog({ posts }) {
2  return (
3    <ul>
4      {posts.map((post) => (
5        <li>{post.title}</li>
6      ))}
7    </ul>
8  )
9}
10
11export async function getStaticProps() {
12  const res = await fetch('https://.../posts')
13  const posts = await res.json()
14 
15  return {
16    props: {
17      posts,
18    },
19  }
20}

App Router

App RouterはPage Routerの進化系としてNext.js12から登場し、13.4から安定板として提供されたファイルシステムベースのルーターです。 AppRoterの場合、フォルダ名部分がルートとなり、ルーティングに使用するファイルはPage.tsxとします。

1article
2┗page.tsx
3about
4┗page.tsx

という構成にすることで

1https://[サーバーのアドレス]/article
2https://[サーバーのアドレス]/about

のようなURLになります。

generateStaticPaths

サーバーサイドで動的なルートを生成する場合には、generateStaticPathsを使用します。

1export async function generateStaticParams() {
2  const products = await fetch('https://.../products').then((res) => res.json())
3 
4  return products.map((product) => ({
5    category: product.category.slug,
6    product: product.id,
7  }))
8}
9 
10export default function Page({
11  params,
12}: {
13  params: { category: string; product: string }
14}) {
15  // ...
16}

まとめ

今回の学びは、何か始めるときはブログじゃなくて公式を最初に見るということです。上記を全く理解していない状態で公式ではなくブログなどをいくつか読むと、微妙に書いてあることが違うので非常に混乱しまてしまいました。つまり、今出回っている書籍も基本的には古いことになるので、基本は公式をまずチェックするのが大事だと痛感しました。また、触ってみたいと思っていたtailwindも触れたのでおおむね満足です。 また、今回は作り始めるとやりたいことが増えていき、だらだらと長く作ってしまったので、趣味的なコーディングであｔっても計画・目標・設計ぽいことは重要だなと感じました。プライベートは仕事よりも時間がなく、作りたいものも多いので。。

参考

Next.js：PageRouter

Next.js：getStaticProps

Next.js：AppRouter

Next.js：generateStaticParams