Next.jsのチュートリアルが、丁寧ですごくわかりやすかった

業務上必要なこともあり、Next.jsのチュートリアルをやってみました。

nextjs.org

良かった点

1. SSG(Static Site Generator)とSSR(Server Side Rendering)が両方学べる
2. 英語なのに読みやすかった
3. チュートリアルが丁寧なので、難しくない

SSG(Static Site Generator)とSSR(Server Side Rendering)の違い

SSGは静的サイトジェネレーターと呼ばれますが、ビルドの時点でHTMLやCSSを生成できます。 実生活で例えるならば、組み立て家具ではなく、事前に組み立て済みの完成品家具を提供するようなイメージです。

一方でSSRの場合は、リクエスト毎にHTMLやCSSを生成します。 お客様に完成品の家具を提供できることはSSGも同じですが、家具で例えるならば受注生産のようなイメージです。

1. 誰がアクセスしても同じ結果を返却する場合は、SSGでビルド時に結果を生成しておくことが望ましい
2. アクセスしたユーザーによって結果が異なる場合は、SSGではなくSSRを検討する

ちなみにSSGもSSRも採用しない場合は、CSR(Client Side Rendering)になります。SSRがサーバーサイドなら、CSRはクライアントサイドということになります。

SSG / SSR / CSRはどれも一長一短なので、適材適所で選定する必要がありそうです。

getStaticPropsとPropsgetStaticPaths

実際にどうやってSSGを実現するのかという点ですが、Next.jsではgetStaticPropsというビルド時に実行する関数を経由して、Reactコンポーネントに与えるPropsをビルド時に確定させるような形で行います。

// From: https://nextjs.org/learn/basics/data-fetching/with-data
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

またgetStaticPathsは、ビルド時にサイト内のパス（/hoge/bar, /bar/foo ...）を確定させる役割を担います。 getStaticPathsでパスを確定し、getStaticPropsでコンポーネントが持つ値を確定させることで、静的な結果を出力できるというわけです。

英語だが読みやすい

Next.jsのチュートリアルなんですが、英語がすごく読みやすいです。 これはチュートリアルを執筆されたのが、Uesugiさんだからという理由もあるかもしれません。

Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました!

🎓英語ですが初心者向けです!
⚛️最近導入されたgetStaticProps等の関数や、
🎨CSS Modulesの解説をしています!
🗣ブログを作りながら学びます
🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc

— Shu Uesugi (@chibicode) 2020年4月21日

単元毎に、ページのラストに簡単なクイズがあります。 理解度チェックに役立つのと、クイズに正解できると英文をしっかり読めたという実感がわくので、オススメです。

チュートリアルが丁寧

私は上から順にチュートリアルを進めていったのですが、つまづくことなく進めました。

チュートリアルが丁寧だと、今後も使っていきたいというモチベーションが高まります。 何よりプロジェクトや社内で布教する場合も、チュートリアルを教えれば良いので楽です。

まとめ

Next.jsのチュートリアルは感動するレベルで良かったので、ご興味ある方はぜひ。

nextjs.org