Next.js v9を学んだメモ

Learn - Getting Started | Next.jsのメモ

  • pages/配下にReact componentを置くと、ファイル名がpathになる
  • next/linkでナビゲーションする

    • location history support
  • pagesとstaticディレクトリだけが特別
  • useRouterというhook使うと、routerオブジェクトにアクセスできる

    • query stringとか
    • React Hook!
  • /pages/p/[id].jsというネーミング。。。なんかモゾッとする

    • []で囲まれてて拡張子というファイルネームしか受け付けない
    • x: post-[id].js
    • o: [postid].js
    • useRouterでアクセスできる
    • link作成するときは、hrefに加えてasパラメータを利用してパラメータをマッピングする
  • getInitialProps でページ初期化用にfetchできる

    • contextが引数に渡ってきて、queryオブジェクトにもアクセスできる
    • サーバー側でrenderするときにfetchするのか、client側でナビゲーションしてfetchするかで、どっちサイドでfetchするか決まる
    • ということはログの仕組みとか工夫しないといけなさそう...

  • styled-jsxが独自だったらちょっとアレ

    • cssはそのままかけそう(camel caseじゃない
    • 補完きかなそう
    • styleはchild componentには影響しない
    • global指定もできる <style jsx global>
  • ZEIT nowってどんなんだろう
  • npm run export(next export)で、static appとして出力できる
  • typescript
$ mkdir next-ts
$ cd next-ts/
$ npm init -y
$ npm install --save react react-dom next
$ mkdir page
$ mv page/ pages
$ ls
$ npm install --save-dev typescript @types/react @types/react-dom @types/node
$ npm run dev
  • webpack bundle analyzerの見方いまいちわからない

    • If the modules were imported in all pages of our app, they would have been contained inside the commons[a-random-string].js bundle. とのこと
  • await import使って、module lazy-loading
  • await import使用前と使用後

    • /indexと/postのサイズが改善されてる
$ npm run analyze:browser

> hello-next@1.0.0 analyze:browser /Users/okawayuki/workspace/next-learn-demo/E2-lazy-loading-modules
> cross-env BUNDLE_ANALYZE=browser next build

Creating an optimized production build ...

Compiled successfully.

Webpack Bundle Analyzer saved report to /Users/okawayuki/workspace/next-learn-demo/E2-lazy-loading-modules/bundles/client.html
Page            Size     Files  Packages
┌ σ /           241 kB       3        10
├   /_app       2.39 kB      0         4
├   /_document
├   /_error     8.22 kB      0         4
├ ⚡ /about      425 B        2         4
└ σ /post       241 kB       3        10

σ  (Server)       page will be server rendered (i.e. getInitialProps)
⚡  (Static File)  page was prerendered as static HTML

$ npm run analyze:browser

> hello-next@1.0.0 analyze:browser /Users/okawayuki/workspace/next-learn-demo/E2-lazy-loading-modules
> cross-env BUNDLE_ANALYZE=browser next build

Creating an optimized production build ...

Compiled successfully.

Webpack Bundle Analyzer saved report to /Users/okawayuki/workspace/next-learn-demo/E2-lazy-loading-modules/bundles/client.html
Page            Size     Files  Packages
┌ σ /           1.95 kB      3        10
├   /_app       2.39 kB      0         4
├   /_document
├   /_error     8.22 kB      0         4
├ ⚡ /about      426 B        2         4
└ σ /post       1.65 kB      3        10

σ  (Server)       page will be server rendered (i.e. getInitialProps)
⚡  (Static File)  page was prerendered as static HTML
  • dynamic componentを使用しない場合は、bundleのロードも発生しない

    • SSRにも対応している(特別な設定がいらない
  • config設定するだけでAMP対応できるみたい。。。
  • Automatic prerendering、v9の新機能っぽい
  • getInitialPropsを実装しているページかどうかで、SSRするべきか自動判定してビルドしてくれる

    • next.config.jsで target: serverless にすると、lambda用にbuildしてくれる