NextJSが気になっていたので、入門的にブログをつくってみました。ちなみに作ったのはこのブログ。NextJSのブログはテンプレートがたくさんあるので、ブログが欲しいだけだったらテンプレートをそのまま使ったほうが楽ですし、WordPressなんかを採用したほうが楽です。いざ作成する場合にも、入門的にブログを作る工程を解説している記事が多く結構困らないはずでした。
軽くNext.jsについて。Next.jsはREACTベースのフレームワークでSSRとSSGの両方をサポートしています。SSRとSSGともに、サーバー側でHTMLを生成し返却しますが、SSGはビルド時にAPI実行され静的サイトが構築されるため、企業サイトやブログなどデータが動かないサイトに向いているとされています。SSGはほかにも、Gatsby(REACTベース)、Hugo(Goベース)、Nuxt.js(Vue)などがあります。
ほとんどの記事がpage routerを使用したコーディングの開設をしていますが、13.4よりpage routerに変わりAPP Routerというルーティング機能が安定板としてリリースされているようで、Next.jsを知らない私にとっては、思っていたよりも苦労しました。
Page Routerは、ファイルシステムベースのルーターで、pageディレクトリ内の.js、.jsx、.tsxを配置し、それがルートになります。たとえば、
1pages 2┣article.tsx 3┗about.tsx
のような構造の場合は、
1https://[サーバーのアドレス]/article 2https://[サーバーのアドレス]/about
のようなURLになります。
サーバーサイドで動的なルートを生成する場合には、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はPage Routerの進化系としてNext.js12から登場し、13.4から安定板として提供されたファイルシステムベースのルーターです。 AppRoterの場合、フォルダ名部分がルートとなり、ルーティングに使用するファイルはPage.tsxとします。
1article 2┗page.tsx 3about 4┗page.tsx
という構成にすることで
1https://[サーバーのアドレス]/article 2https://[サーバーのアドレス]/about
のようなURLになります。
サーバーサイドで動的なルートを生成する場合には、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も触れたのでおおむね満足です。 また、今回は作り始めるとやりたいことが増えていき、だらだらと長く作ってしまったので、趣味的なコーディングであtっても計画・目標・設計ぽいことは重要だなと感じました。プライベートは仕事よりも時間がなく、作りたいものも多いので。。