- 例なので、実際の使用に際しては個々の事情に応じていい感じにしてください
|- .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
- 使う拡張機能を書いておくと拡張機能インストールの提案が走るのであると便利なやつです
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"msjsdiag.debugger-for-chrome"
]
}
- ブレークポイントを設定してデバッグするときの設定です
{
"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の設定をワークスペースで上書くやつです
- 次の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"
}
- こいつはルートに配置されている必要があり、src/ の下には配置できない
- Nextの公式テンプレでは基本的に存在しないが、ルートがカオスになるのであったほうがいいと思う
# /node_modules/* in the project root is ignored by default
# build artefacts
.next/*
out/*
coverage/*
# data definition files
**/*.d.ts
- 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"
}
}
# /node_modules/* in the project root is ignored by default
# build artefacts
.next/*
out/*
coverage/*
# data definition files
**/*.d.ts
# config files
**/*.config.js
{
"trailingComma": "es5",
"printWidth": 80,
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
import '@testing-library/jest-dom';
import '@testing-library/jest-dom/extend-expect';
- 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',
},
};
.scssとかをimportしようとしたときにエラーにならなくなるやつです
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
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' : '',
};
};
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"
},
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"]
}
- 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"]
}