0xf

日記だよ

next.js 入門した

日記 プログラミング next

諸事情があって手元で elm で書いていたものを移植している。

プロジェクトの作成

プロジェクトディレクトリを適当に作る。

mkdir hoge
cd hoge
npm init -y

チュートリアル - Manual Setupに従い、

npm install next react react-dom
npm install --save-dev typescript @types/react @types/node

する。

package.json の "script" セクションを編集する。

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },

Page の作成

src/pages ディレクトリ以下に index.tsx を作る。src/pages/ 以下のファイル名がデフォルトでルーティングルールとなる。

各ページのモジュールでは、 default export で関数型のReact コンポーネントを書く様にする。古い next.js ではプロジェクトルート直下に pages/ を作っていたけど、最近は src/ 以下に置いても自動的に検出してくれるらしい。便利。

function Hoge(){
  return <div>hello home</div>
}

export default Hoge

開発サーバを起動する。初回の起動時に tsconfig.json が勝手に生えてくる。

% npm run dev       

> hoge@1.0.0 dev
> next dev

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.

f:id:ma2saka:20201129185448p:plain

./src/pages/api/ 以下にファイル置いておくと勝手にルーティングされてサーバーサイドで実行されるらしいので、 ./pages/api/greeting.ts を以下のように書いてみる。

import type { NextApiRequest, NextApiResponse } from "next";

export default (req: NextApiRequest, res: NextApiResponse) => {
  const text = req.query["text"]
  res.status(200).json({ message: `hello ${text}`});
}

こうして実行すると、

% curl -i "localhost:3000/api/greeting?text=world"
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
ETag: "19-sk8ULQY45ndZU9lmLRGpc9jYWFo"
Content-Length: 25
Vary: Accept-Encoding
Date: Sun, 29 Nov 2020 10:05:43 GMT
Connection: keep-alive
Keep-Alive: timeout=5

{"message":"hello world"}

ちゃんと application/json; charset=utf-8 で json が帰ってくる。また、開発サーバーの実行ログにも hello world と出力されていることがわかる。

全体のCSS

グローバルなcssについては _app.tsx とか作ってそこでインポートするのがよいらしい。例えば pages/main.css を作っておけば、

# _app.tsx
import './main.css';

export default function App({ Component, pageProps }){
  return <Component {...pageProps} />
}

のようにして、アプリケーション全体で有効にできる。それに対してモジュールレベルのCSSはファイル名として button.module.css みたいにしなさいと言われる。

余談だけど、最初無名関数を default export していたら、以下のように叱られた。丁寧ですね。

Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;

_app と _document

A custom Document is commonly used to augment your application's and tags. This is necessary because Next.js pages skip the definition of the surrounding document's markup.

_document の内容はサーバーサイドレンダリング専用ですよと。

Document is only rendered in the server, event handlers like onClick won't work.

Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like: - Persisting layout between page changes - Keeping state when navigating pages - Custom error handling using componentDidCatch - Inject additional data into pages - Add global CSS

このエントリでは「Add global CSS」の用途で利用してるわけね。