- 投稿日:
Next.js 11から12にしたらHMRが死んだので復活させるための設定を書いておく
確認環境
Env | Ver |
---|---|
nginx | Windows-1.21.4 |
Next.js | 12.0.4 |
設定例
標準状態でnpx next
を叩いた状態を想定している
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 80;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://localhost:3000;
}
}
- 投稿日:
確認環境
Env | Ver |
---|---|
next | 11.1.2 |
typescript | 4.3.4 |
サンプルコード
__mocks__/next/router.ts
export const useRouter = () => {
return {
route: '/',
pathname: '',
query: '',
asPath: '',
push: jest.fn(),
replace: jest.fn(),
events: {
on: jest.fn(),
off: jest.fn(),
},
beforePopState: jest.fn(() => null),
prefetch: jest.fn(() => null),
};
};
- 投稿日:
Create Next Appで生成されるNext.jsのプロジェクトはCRAで生成される内容と比べると不親切なので、快適に開発できるようにしようという内容です
Zero Config?そんなものは知りません。TypeScriptもESLintもPrettierもJestも全部欲しい!Next.jsのexamplesでは物足りない!
VSCodeで開発しTypeScriptでSSGとして組む前提で書いてます
確認環境
- CRAで吐き出されるTypeScript向けのプロジェクトに対し
npm run eject
をかけたものをベースにしてます - SCSSを使いたいのでsassを入れています
Env | Ver |
---|---|
VSCode | 1.57.1 |
next | 11.0.1 |
react | 17.0.2 |
react-dom | 17.0.2 |
@testing-library/jest-dom | 5.14.1 |
@testing-library/react | 11.2.7 |
@testing-library/react-hooks | 7.0.1 |
@types/jest | 26.0.23 |
@types/node | 15.0.2 |
@types/react | 17.0.5 |
@types/react-dom | 17.0.3 |
@typescript-eslint/eslint-plugin | 4.23.0 |
@typescript-eslint/parser | 4.23.0 |
eslint | 7.26.0 |
eslint-config-next | 11.0.1 |
eslint-config-prettier | 8.3.0 |
eslint-config-react-app | 6.0.0 |
eslint-plugin-flowtype | 5.7.2 |
eslint-plugin-import | 2.23.2 |
eslint-plugin-jest | 24.3.6 |
eslint-plugin-jsx-a11y | 6.4.1 |
eslint-plugin-react | 7.23.2 |
eslint-plugin-react-hooks | 4.2.0 |
eslint-plugin-testing-library | 3.9.0 |
identity-obj-proxy | 3.0.0 |
jest | 27.0.5 |
sass | 1.38.2 |
jest-watch-typeahead | 0.6.4 |
prettier | 2.2.1 |
serve | 12.0.0 |
ts-jest | 27.0.3 |
typescript | 4.3.4 |
npm packages の導入
- 次のコマンドを流し必要なものを一式入れる
- バージョンの整合性が上手く合わないときは気合で調整する
npm i next react react-dom
npm i -D @testing-library/jest-dom @testing-library/react @testing-library/react-hooks @types/jest @types/node @types/react @types/react-dom @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-next eslint-config-prettier eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library identity-obj-proxy jest jest-watch-typeahead prettier sass serve ts-jest typescript
プロジェクトの構成例
- 例なので、実際の使用に際しては個々の事情に応じていい感じにしてください
|- .vscode/
|- extensions.json
|- launch.json
|- settings.json
|- public/
|- src/
|- components/
|- pages/
|- .eslintignore
|- .eslintrc
|- .gitignore
|- .prettierrc
|- jest-setup.ts
|- jest.config.js
|- next-env.d.ts
|- next.config.js
|- package.json
|- tsconfig.jest.json
|- tsconfig.json
.vscode/extensions.json
- 使う拡張機能を書いておくと拡張機能インストールの提案が走るのであると便利なやつです
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"msjsdiag.debugger-for-chrome"
]
}
.vscode/launch.json
- ブレークポイントを設定してデバッグするときの設定です
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Next: Node",
"skipFiles": ["<node_internals>/**", ".next/**"],
"port": 9229
},
{
"type": "chrome",
"request": "launch",
"name": "Next: Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack://_N_E/*": "${webRoot}/*"
},
"runtimeArgs": ["--profile-directory=debug-profile"]
}
],
"compounds": [
{
"name": "Next: Full",
"configurations": ["Next: Node", "Next: Chrome"]
}
]
}
.vscode/settings.json
- VSCodeの設定をワークスペースで上書くやつです
- 次の2つでワークスペースのTypeScriptを使うことを宣言しています。グローバルとは切り離しておきたいことってあると思います
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.tsdk": "node_modules/typescript/lib",
// Place your settings in this file to overwrite default and user settings.
{
"search.exclude": {
"**/node_modules": true,
"**/.next": true,
"**/out": true,
"**/coverage": true
},
"files.eol": "\n",
"files.insertFinalNewline": true,
"git.suggestSmartCommit": false,
"git.autofetch": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.alwaysShowStatus": true,
"eslint.validate": ["javascript", "typescript"],
"editor.formatOnSave": true,
"[javascript]": {
"editor.tabSize": 2
},
"javascript.suggest.paths": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"[typescript]": {
"editor.tabSize": 2
},
"typescript.suggest.paths": true,
"typescript.updateImportsOnFileMove.enabled": "always",
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.referencesCodeLens.enabled": true,
"typescript.validate.enable": true,
"typescript.preferences.importModuleSpecifier": "relative"
}
public/
- こいつはルートに配置されている必要があり、src/ の下には配置できない
src/
- Nextの公式テンプレでは基本的に存在しないが、ルートがカオスになるのであったほうがいいと思う
.eslintignore
- とりあえずこんくらいあればいいでしょう
# /node_modules/* in the project root is ignored by default
# build artefacts
.next/*
out/*
coverage/*
# data definition files
**/*.d.ts
.eslintrc
- TSとReactの推奨を設定し、ビルドエラーに繋がりな部分や、型を厳格にする設定、楽な記法を全力採用
- Jest周りが弱い気がしてるので、もっといい書き方があると思います
"extends": "next"
は意図的に入れていませんpackage.json
に書いてあるeslint-config-next
はないと怒られるので入れてるだけです
{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"react-app",
"react-app/jest",
"plugin:react/recommended",
"prettier"
],
"plugins": ["react", "@typescript-eslint"],
"parserOptions": {
"project": "./tsconfig.json",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
// Enforce the consistent use of either backticks, double, or single quotes
"quotes": ["warn", "single"],
// Enforce the consistent use of either function declarations or expressions
"func-style": ["warn", "expression", { "allowArrowFunctions": true }],
// Detect missing key prop
"react/jsx-key": [
"warn",
{ "checkFragmentShorthand": true, "checkKeyMustBeforeSpread": true }
],
// Enforce shorthand or standard form for React fragments
"react/jsx-fragments": ["warn", "syntax"],
// Prevent missing React when using JSX
"react/react-in-jsx-scope": "off",
// Validate whitespace in and around the JSX opening and closing brackets
"react/jsx-tag-spacing": [
"warn",
{
"closingSlash": "never",
"beforeSelfClosing": "always",
"afterOpening": "never",
"beforeClosing": "never"
}
],
// Prevent extra closing tags for components without children
"react/self-closing-comp": [
"warn",
{
"component": true,
"html": true
}
],
// Allow non-explicit return types on functions and class methods
"@typescript-eslint/explicit-function-return-type": "off",
// Allow non-explicit return types on exported functions
"@typescript-eslint/explicit-module-boundary-types": "off",
// Disallow usage of the any type
"@typescript-eslint/no-explicit-any": 1,
// Disallows explicit type declarations for variables or parameters initialized to a number, string, or boolean
"@typescript-eslint/no-inferrable-types": [
"error",
{
"ignoreParameters": true
}
],
// Error on declared but not used variable
"@typescript-eslint/no-unused-vars": "error"
}
}
.gitignore
- これはテンプレそのままでいい気がします
# /node_modules/* in the project root is ignored by default
# build artefacts
.next/*
out/*
coverage/*
# data definition files
**/*.d.ts
# config files
**/*.config.js
.prettierrc
- こんくらいあればいいでしょう
{
"trailingComma": "es5",
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
jest-setup.ts
- CRAでReactをセットアップすると当たり前のように入ってるmatcher を標準で入れるためのやつです
- 具体的には
toHaveAttribute()
みたいなやつを追加できます
import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';
jest.config.js
- CRAでReactをセットアップすると勝手に設定されますが、Next.jsはそこまで親切ではないので自分で書きます
- 一応examplesにそれっぽいものはありますが、物足りないと思います
- tsconfig.jsonがNext.jsによって勝手に書き換えられる関係で、jest用のtsconfigを用意しています
- CRAで作ったプロジェクトみたいにテストをWatch出来るようにしています
.scss
とかをimport
していてもコケないようにしています- 但し以下の設定ではjsdomとaxiosの相性が良くなく、axiosを使ったテストが上手く通らないケースがあります
- これは基本的にテストがSSRとして実行される関係でnodeでないと上手く機能しないことが関係しているのではないかと考えていますが、DOMのテストにはjsdomが必要なので悩ましいところ…
module.exports = {
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tsconfig.jest.json',
},
},
preset: 'ts-jest',
clearMocks: true,
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
roots: ['<rootDir>'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
collectCoverageFrom: ['src/**/*.{ts,tsx,js,jsx}'],
testEnvironment: 'jsdom',
testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
transform: {
'^.+\\.(ts|tsx)$': 'ts-jest',
},
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname',
],
moduleNameMapper: {
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
'\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
},
};
next-env.d.ts
.scss
とかをimport
しようとしたときにエラーにならなくなるやつです
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
next.config.js
basePath
: SSGをビルドしたときの基準パスを設定できます- 以下の例だと
https://example.com/deploy-path-here
が基準パスになります - 開発時は不便なので
http://localhost:3000
になるようにしてます
- 以下の例だと
assetPrefix
:_next/
の位置を指定できます- 以下の例だと
https://example.com/assets-path-here/_next
が_next/
の位置になります- 既に
_next/
が存在する場所に設置するような場合に役立つと思われます
- 既に
- 開発時にはあっても意味がないので除外する設定にしています
- 以下の例だと
module.exports = (phase, { defaultConfig }) => {
return {
basePath: isProd ? '/deploy-path-here' : '',
assetPrefix: isProd ? '/assets-path-here' : '',
};
};
package.json
scripts
にこんくらい書いとくと便利かな?とは思いますdev
デバッグサーバーが起動します。ブレークポイントを設定して確認するときに使いますstart
開発サーバーが起動します。CRAで作ったReactと同じですbuild
out/
にプロダクションビルドを吐きますserve
out/
の中身をlocalhostで上げますtype-check
ESLintとTSCのチェックを走らせてエラーを検知しますtest
CRAで作ったReact同様にWatchモードでテストを走らせますcoverage
テストカバレッジが出ます。但しDOM周りのチェックはしてくれないので、ラッパーコンポーネントでPropsが意図した通り刺さっているかみたいなのは計測対象外です
"scripts": {
"dev": "NODE_OPTIONS='--inspect' next",
"start": "next",
"build": "next build --profile && next export",
"serve": "serve -p 3000 ./out",
"test": "jest --watch",
"type-check": "tsc --noEmit && eslint .",
"headless-test": "npm run type-check && jest",
"coverage": "jest --coverage"
},
tsconfig.jest.json
jsx
をreact-jsx
にしてるのが味噌ですnext
を蹴るとtsconfig.json
を勝手にpreserve
に書き換えてくるのでその対策です
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"lib": ["dom", "es2017"],
"allowJs": true,
"checkJs": true,
"jsx": "react-jsx",
"sourceMap": true,
"noEmit": true,
"isolatedModules": true,
"strict": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"moduleResolution": "node",
"baseUrl": "./",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
tsconfig.json
- CRAでTSのReactプロジェクトを生やした時のものがベースですが、より厳格に設定したような気がします
isolatedModules: true
にしておくとソースファイルにexport
やimport
が存在しないときに怒ってくれて便利ですresolveJsonModule: true
もJSONをimport
可能になるので地味に便利です
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"lib": ["dom", "es2017"],
"allowJs": true,
"checkJs": true,
"jsx": "preserve",
"sourceMap": true,
"noEmit": true,
"isolatedModules": true,
"strict": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"moduleResolution": "node",
"baseUrl": "./",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
おまけ
tsconfig.jsonが開発サーバー起動時に書き換えられて困る
"jsx": "preserve",
にされるとVSCodeでは入力補完がイマイチ効かなかったり、import React from 'react';
を挿入しようとしてきて面倒です- 解決策としては
next
起動後にtsconfig.json
の"jsx": "preserve",
を"jsx": "react-jsx",
に置換してあげればよいですが、nextの動作に何かしらの悪影響があるかどうかまでは調べてないです- 自動化も単純なものならconcurrentlyとシェルスクリプトの組み合わせで簡単に実現できます
- 根本的にはTypeScriptの問題である可能性があるので、解決されるのを待つしかない気がします(Next.js側で対応すべきだとは思うが…
- Next.js側にもIssueが立ちました
今回説明した一式が欲しい人向け
以下のリポジトリにある内容は随時更新されるため、本記事投稿時点の内容と差異がある可能性があります
- Lycolia / ts-next-boilerplate に転がしてるのでどうぞ
- @lycolia/ts-boilerplate-generator-cli を使って生やすことも出来ます
- 投稿日:
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')
- 例えば次のコードでYAMLファイルの読み込みができたりする
- 余談ですが
getStaticProps()
にpath.join(process.cwd(), 'contents/biography.yaml')
みたいに書いてやるとpublic外のファイルを読めます