前回に引き続き、Next.jsについてです。
主な特徴は次のとおりです。
①SSR/SSG
②ファイルベースルーティング
③開発サーバの部分的な高速リロード(Fast Refresh)
④画像最適化
⑤ゼロコンフィグ
今回は、②について述べたいと思います。
ファイルベースルーティングの特徴として
pagesディレクトリにファイルが追加すると、ルートとして自動で使用することができます。
たとえば、pagesディレクトリ内のファイルは次のパターンで定義されます。
「pages/index.js」であれば「/」
「pages/blog/index.js」であれば「/blog」
また、動的なセグメントにマッチすることも可能で、ブラケット記法を使うことができます。
また名前付きパラメータとのマッチが可能です。
「pages/blog/[slug].js」であれば「/blog/:slug (/blog/hello-world)」
「pages/[username]/settings.js」であれば「/:username/settings (/foo/settings)」
「pages/post/[…all].js」であれば「/post/* (/post/2020/id/title)」
URLがファイルを作成すれば自動的にルーティングできるので、
非常に簡単で便利ですね。
ではでは。