Next.js事始め

nextjs.org をサラーっと読み流したログ
Next.js 9.3 時点でのドキュメント、SSR については基本言及しない

ドキュメントの和訳でもなんでもなく単なる書き殴りです
書き殴りなので情報の漏れなどは当然ありますし、そもそも知りたいところしか読んでません。
つまり、ここに書いてあることは何も信じてはならないので、真実は君の目で確かめて欲しい。
私はまだコードも書いてないし何もわからない、知らない、関知できない!すまないッッ!!!!

Getting Started

システム要件

  • Node.js 10.13 or later
  • MacOS, Windows (including WSL), and Linux are supported

プロジェクトの生やし方

  • create-next-app --example with-typescript project-name

プロジェクトの蹴り方

  • dev - 開発サーバーが上がるよ
  • build - プロダクションビルドを生成するよ
  • start - プロダクションサーバーを上げるよ

Basic Feature

Pages

ページの生やし方

  • pages/about.tsx のようにすると静的ページが生えるよ。やったね。
  • pages/posts/[id].tsx なら動的ルーティングも可能だ!
  • コンポーネントを export するときは面倒でも export default しないと上手く行かないので注意しよう
    • これはダメ
      • export const Foo = () => { return <p /> };
    • 多分コンポーネントでなければ大丈夫?

事前レンダリング

  • Next.js では基本的にページを事前レンダリングするよ
  • つまり静的 HTML として事前に吐き出すよ
    • これによって SEO 効果やページのパフォーマンスが向上するよ
    • この HTML には最小限の JS が含まれていて、ページの対話性は保たれているよ
      • この工程を hydration と呼ぶよ

二つの事前レンダリング

Next.js では次の二種類のレンダリングに対応しているよ

  • Static Generation
    • 静的 HTML を吐くから SEO もパフォーマンスもバッチリ
  • Server-side Rendering
    • 毎回サーバーで捏ねるからパフォーマンスはイマイチ
    • CDN の設定も大変

勿論、CSR はどちらでも使えるのだけど、CSR のデータフェッチについてはこっち

Data Fetching

データの取得方法について

getStaticProps

  • この関数はライフサイクルフックなようなもので、Static Generation の場合、HTML 生成前に実行されるよ
    • つまりサーバーサイドで事前にデータを拾っておいて詰め込む時に使う

export const getStaticProps = (context) => {
  return {
    props: {}, // will be passed to the page component as props
  };
};
  • context の中身はここを参照
    • Router の Props 的なものが入っているっぽい?
    • 使わないのであれば省いてもいい
  • ここの戻り値はコンポーネントの引数に入ってくるよ
    • props required。突っ込みたいデータを入れてね
    • revalidate Optional。ISR をする時に使うよ。詳しくはここ
    • notFound Optional。true にすると 404 が表示される。使用例は以下のような感じ

export const getStaticProps = (context) => {
  const res = await fetch(`https://.../data`);
  const data = await res.json();
  if (!data) {
    return {
      notFound: true,
    };
  }
  return {
    props: {}, // will be passed to the page component as props
  };
};

Static File Serving

  • public/ 配下は静的ファイルの配置場所として使える

    • 例えば次のコードで YAML ファイルの読み込みができたりする
      • fs.readFileSync('public/biography.yaml')
  • 余談ですが getStaticProps()path.join(process.cwd(), 'contents/biography.yaml') みたいに書いてやると public 外のファイルを読めます