一般社団法人 全国個人事業主支援協会

COLUMN コラム

前回に引き続き、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がファイルを作成すれば自動的にルーティングできるので、
非常に簡単で便利ですね。

ではでは。

The following two tabs change content below.

本夛 哲也

2018年10月からフリーランスとして活動中!

最新記事 by 本夛 哲也 (全て見る)

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア