Lycolog

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外のファイルを読めます