Next.js 素振り会場を作る

素振りっていい表現だなと思って使っているけどあんまり周りで聞かない気がする。

以下五行でなんとか

$ npm init -y
$ npm install next react react-dom
$ mkdir src/pages/
$ echo 'export default () => <h1>hello</h1>' > src/pages/index.jsx
$ npx next dev

React 17 の新しいJSXトランスフォーマーのおかげで import React from 'react' がなくてもいけるようになっている。便利。

Fast Refresh が発生したときローカルステートを保護するために

名前をつけよと。

Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

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

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

next.js の開発サーバのHMRちょっと状態の保全の癖があるなと思っていたけど、こういうのあるのか。気をつけてみよう。

Fast Refresh は こういうものらしい。9.4から入った。コンポーネントの状態を維持したままコードの変更をリロードできる。