Next.jsのドキュメントを全部読んでみた

最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。メモを置いておく。

https://nextjs.org/docs/routing/introduction#dynamic-route-segments

pages/post/[…all] → /post/* (/post/2020/id/title) こんなことできるのか！ただ全部吸い込まれるのは使いづらそう

https://nextjs.org/docs/routing/shallow-routing

router.pushにshallowオプションを加えると、getInitialPropsを実行しないレンダリングができる。ページ内でクエリやハッシュフラグメントを変えるなどで便利に使えそう

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Current URL is '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', null, { shallow: true })
  }, [])

  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}

export default Page

https://nextjs.org/docs/api-routes/introduction

api routesはヘルスチェックエンドポイントとか作るのに便利そう

https://nextjs.org/docs/api-routes/api-middlewares

api限定の設定を入れられる

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '1mb',
    },
  },
}

micro middleware を使えばハンドラを拡張できる

import Cors from 'micro-cors'

const cors = Cors({
  allowMethods: ['GET', 'HEAD'],
})

function handler(req, res) {
  res.json({ message: 'Hello Everyone!' })
}

export default cors(handler)

https://nextjs.org/docs/api-routes/response-helpers

Next.jsのresにはres.jsonなど便利メソッドが生えている

https://nextjs.org/docs/deployment

サーバサイドのデプロイは、.next、node_modules、package.jsonを配置したら良い

Generally you'll have to follow these steps to deploy to production:
        Run npm install
        Run npm run build (runs next build)
        Potentially copy the .next, node_modules, and package.json to your server.
        Run npm run start (runs next start) on the server

https://nextjs.org/docs/advanced-features/dynamic-import

dynamic importを、使って一部だけssrしないようにできる

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

https://nextjs.org/docs/advanced-features/custom-document

documentをいじればheadとかを置き換えられる
- favicon変えたり、apple-touch-icon入れたりと色々できそう
DocumentのgetInitialPropsは、SSR時にしか使われない模様

https://nextjs.org/docs/api-reference/next/head

head内のタグは、key propを付けることで、同じkeyなら上書きという挙動ができる。タグが複数付くことを防げる。

https://nextjs.org/docs/api-reference/data-fetching/getInitialProps getinitialpropsに渡ってくるもの

pathname - Current route. That is the path of the page in /pages
query - Query string section of URL parsed as an object
asPath - String of the actual path (including the query) shown in the browser
req - HTTP request object (server only)
res - HTTP response object (server only)
err - Error object if any error is encountered during the rendering

https://arunoda.me/blog/ssr-and-server-only-modules webpack analyzerを使って、bundle sizeを検証することができる

https://nextjs.org/docs/api-reference/next.config.js/introduction 設定できるリストへの参照がここに載ってる

https://nextjs.org/docs/api-reference/next.config.js/environment-variables env設定で環境変数を設定できる

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config next.config.jsのwebpackの設定に渡ってくる引数

The second argument to the webpack function is an object with the following properties:
        buildId: String - The build id, used as a unique identifier between builds
        dev: Boolean - Indicates if the compilation will be done in development
        isServer: Boolean - It's true for server-side compilation, and false for client-side compilation
        defaultLoaders: Object - Default loaders used internally by Next.js:
        babel: Object - Default babel-loader configuration

https://nextjs.org/docs/api-reference/next.config.js/configuring-the-build-id build idを生成する関数を定義できる。gitのrevisionにするとかできそう

$shibayu36->blog;

クラスター株式会社のソフトウェアエンジニアです。エンジニアリングや読書などについて書いています。

Next.jsのドキュメントを全部読んでみた