はじめに
お仕事で何個かNext.jsのプロジェクトを作っていると大体同じような手順を繰り返すことがわかったため手順書に起こしました。
もし良ければ参考・ご指摘頂けると嬉しいです。
セットアップ内容
- 言語：TypeScript
- ライブラリ：React
- フレームワーク：Nextjs
- UIライブラリ：MUI
- パッケージマネージャー：npm
- コードフォーマッター：Prettier
- リント：ESLint
- テスト：Jest, React Testing Libraly
Nextjsの初期設定
参考リンク：https://nextjs-ja-translation-docs.vercel.app/docs/getting-started
- 以下のコマンドを実行する。
npx create-next-app@latest --typescript
または
yarn create next-app --typescript
$ npx create-next-app@latest --typescript
Need to install the following packages:
create-next-app@12.3.1
Ok to proceed? (y) y
✔ What is your project named? … <Project-name>
Creating a new Next.js app in /home/<Project-name>.
Using yarn.
Installing dependencies:
- react
- react-dom
- next
yarn add v1.22.19
warning ../package.json: No license field
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
├─ next@12.3.1
├─ react-dom@18.2.0
└─ react@18.2.0
info All dependencies
├─ @next/env@12.3.1
├─ @next/swc-linux-x64-gnu@12.3.1
├─ @next/swc-linux-x64-musl@12.3.1
├─ @swc/helpers@0.4.11
├─ caniuse-lite@1.0.30001412
├─ js-tokens@4.0.0
├─ nanoid@3.3.4
├─ next@12.3.1
├─ picocolors@1.0.0
├─ postcss@8.4.14
├─ react-dom@18.2.0
├─ react@18.2.0
├─ scheduler@0.23.0
├─ source-map-js@1.0.2
├─ styled-jsx@5.0.7
├─ tslib@2.4.0
└─ use-sync-external-store@1.2.0
Done in 23.06s.
Installing devDependencies:
- eslint
- eslint-config-next
- typescript
- @types/react
- @types/node
- @types/react-dom
yarn add v1.22.19
warning ../package.json: No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 159 new dependencies.
info Direct dependencies
├─ @types/node@18.7.23
├─ @types/react-dom@18.0.6
├─ @types/react@18.0.21
├─ eslint-config-next@12.3.1
├─ eslint@8.24.0
└─ typescript@4.8.3
info All dependencies
├─ @babel/runtime-corejs3@7.19.1
├─ @babel/runtime@7.19.0
├─ @eslint/eslintrc@1.3.2
├─ @humanwhocodes/config-array@0.10.5
├─ @humanwhocodes/gitignore-to-minimatch@1.0.2
├─ @humanwhocodes/module-importer@1.0.1
├─ @humanwhocodes/object-schema@1.2.1
├─ @next/eslint-plugin-next@12.3.1
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.stat@2.0.5
├─ @nodelib/fs.walk@1.2.8
├─ @rushstack/eslint-patch@1.2.0
├─ @types/json5@0.0.29
├─ @types/node@18.7.23
├─ @types/prop-types@15.7.5
├─ @types/react-dom@18.0.6
├─ @types/react@18.0.21
├─ @types/scheduler@0.16.2
├─ @typescript-eslint/parser@5.38.1
├─ @typescript-eslint/scope-manager@5.38.1
├─ @typescript-eslint/typescript-estree@5.38.1
├─ acorn-jsx@5.3.2
├─ acorn@8.8.0
├─ ajv@6.12.6
├─ ansi-regex@5.0.1
├─ ansi-styles@4.3.0
├─ argparse@2.0.1
├─ aria-query@4.2.2
├─ array-union@2.1.0
├─ array.prototype.flat@1.3.0
├─ array.prototype.flatmap@1.3.0
├─ ast-types-flow@0.0.7
├─ axe-core@4.4.3
├─ axobject-query@2.2.0
├─ balanced-match@1.0.2
├─ brace-expansion@1.1.11
├─ braces@3.0.2
├─ callsites@3.1.0
├─ chalk@4.1.2
├─ color-convert@2.0.1
├─ color-name@1.1.4
├─ concat-map@0.0.1
├─ core-js-pure@3.25.3
├─ cross-spawn@7.0.3
├─ csstype@3.1.1
├─ damerau-levenshtein@1.0.8
├─ deep-is@0.1.4
├─ dir-glob@3.0.1
├─ emoji-regex@9.2.2
├─ es-to-primitive@1.2.1
├─ escape-string-regexp@4.0.0
├─ eslint-config-next@12.3.1
├─ eslint-import-resolver-typescript@2.7.1
├─ eslint-module-utils@2.7.4
├─ eslint-plugin-import@2.26.0
├─ eslint-plugin-jsx-a11y@6.6.1
├─ eslint-plugin-react-hooks@4.6.0
├─ eslint-plugin-react@7.31.8
├─ eslint-scope@7.1.1
├─ eslint-utils@3.0.0
├─ eslint@8.24.0
├─ esquery@1.4.0
├─ esrecurse@4.3.0
├─ estraverse@5.3.0
├─ fast-deep-equal@3.1.3
├─ fast-glob@3.2.12
├─ fast-json-stable-stringify@2.1.0
├─ fast-levenshtein@2.0.6
├─ fastq@1.13.0
├─ file-entry-cache@6.0.1
├─ fill-range@7.0.1
├─ find-up@5.0.0
├─ flat-cache@3.0.4
├─ flatted@3.2.7
├─ function.prototype.name@1.1.5
├─ get-symbol-description@1.0.0
├─ glob-parent@6.0.2
├─ glob@7.2.3
├─ grapheme-splitter@1.0.4
├─ has-bigints@1.0.2
├─ has-flag@4.0.0
├─ import-fresh@3.3.0
├─ imurmurhash@0.1.4
├─ is-bigint@1.0.4
├─ is-boolean-object@1.1.2
├─ is-callable@1.2.7
├─ is-date-object@1.0.5
├─ is-extglob@2.1.1
├─ is-negative-zero@2.0.2
├─ is-number-object@1.0.7
├─ is-number@7.0.0
├─ is-shared-array-buffer@1.0.2
├─ is-string@1.0.7
├─ is-symbol@1.0.4
├─ is-weakref@1.0.2
├─ isexe@2.0.0
├─ js-sdsl@4.1.4
├─ json-schema-traverse@0.4.1
├─ json-stable-stringify-without-jsonify@1.0.1
├─ json5@1.0.1
├─ jsx-ast-utils@3.3.3
├─ language-subtag-registry@0.3.22
├─ language-tags@1.0.5
├─ locate-path@6.0.0
├─ lodash.merge@4.6.2
├─ lru-cache@6.0.0
├─ merge2@1.4.1
├─ micromatch@4.0.5
├─ minimist@1.2.6
├─ ms@2.1.2
├─ natural-compare@1.4.0
├─ object-assign@4.1.1
├─ object-inspect@1.12.2
├─ object.assign@4.1.4
├─ object.entries@1.1.5
├─ object.fromentries@2.0.5
├─ object.hasown@1.1.1
├─ optionator@0.9.1
├─ p-limit@3.1.0
├─ p-locate@5.0.0
├─ parent-module@1.0.1
├─ path-exists@4.0.0
├─ path-key@3.1.1
├─ path-type@4.0.0
├─ picomatch@2.3.1
├─ prop-types@15.8.1
├─ punycode@2.1.1
├─ queue-microtask@1.2.3
├─ react-is@16.13.1
├─ regexp.prototype.flags@1.4.3
├─ regexpp@3.2.0
├─ resolve-from@4.0.0
├─ reusify@1.0.4
├─ rimraf@3.0.2
├─ run-parallel@1.2.0
├─ safe-regex-test@1.0.0
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ slash@3.0.0
├─ string.prototype.matchall@4.0.7
├─ string.prototype.trimend@1.0.5
├─ string.prototype.trimstart@1.0.5
├─ strip-ansi@6.0.1
├─ strip-bom@3.0.0
├─ strip-json-comments@3.1.1
├─ supports-color@7.2.0
├─ text-table@0.2.0
├─ to-regex-range@5.0.1
├─ tsutils@3.21.0
├─ type-check@0.4.0
├─ type-fest@0.20.2
├─ typescript@4.8.3
├─ unbox-primitive@1.0.2
├─ uri-js@4.4.1
├─ which-boxed-primitive@1.0.2
├─ which@2.0.2
├─ word-wrap@1.2.3
├─ yallist@4.0.0
└─ yocto-queue@0.1.0
Done in 15.86s.
Initialized a git repository.
Success! Created <Project-name> at /home/<Project-name>
(srcディレクトリを作成する場合)
srcディレクトリを作成し、pages、stylesを配下に移動させる。そしてsrc配下にcomponents、utils、typesディレクトリを作成する。
cd <Project-name>
mkdir src && mv pages/ styles/ src/
mkdir {src/components,src/utils,src/types}
touch {src/components/.gitkeep,src/types/.gitkeep}
tsconfigの修正
以下の設定値をcompilerOptionsに追加する。それによりcomponents等のディレクトリのファイルについて、@componentsで指定することが可能。
"baseUrl": ".",
"paths": {
"@pages/*": ["./src/pages/*"],
"@styles/*": ["./src/styles/*"],
"@components/*": ["./src/components/*"],
"@utils/*": ["./src/utils/*"],
"@types/*": ["./src/types/*"],
}
package.jsonの修正
デフォルトではscriptsにexportがないため追加が必要。
"export": "next export",
Prettierの設定
- 以下のコマンドを実行する。
npm install -D prettier eslint-config-prettier
または
yarn add -D prettier eslint-config-prettier
$ npm install -D prettier eslint-config-prettier
added 2 packages, and audited 239 packages in 2s
79 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
コードフォーマットのルールを設定するために.prettierrc.jsonを作成する
設定値はPrettierの公式を参考に設定する
リンク：https://prettier.io/docs/en/options.html
{
"arrowParens": "avoid",
"printWidth": 120,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "all",
"endOfLine": "auto"
}
Prettierの整形対象を設定
package.jsonのscriptsに以下を追記し、Prettierの整形対象を設定する。
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
ESLintの設定ファイルを修正
.eslintrc.jsonにprettierを追記し、ESLintとPrettierが干渉しないようにする。
{
"extends": ["next/core-web-vitals", "prettier"]
}
デフォルトではルールが設定されていないため、追加でルールを設定したい場合は.eslintrc.jsonに追記する。
{
"extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended","prettier"],
"rules": {
"react/display-name": "off",
"@next/next/no-img-element": "off",
"react/no-unescaped-entities": "off",
"import/no-anonymous-default-export": "off",
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-non-null-assertion": "off",
// add new line above comment
"lines-around-comment": [
"error",
{
"beforeLineComment": true,
"beforeBlockComment": true,
"allowBlockStart": true,
"allowClassStart": true,
"allowObjectStart": true,
"allowArrayStart": true
}
],
// add new line above return
"newline-before-return": "error",
// add new line below import
"import/newline-after-import": [
"error",
{
"count": 1
}
],
"@typescript-eslint/ban-types": [
"error",
{
"extendDefaults": true,
"types": {
"{}": false
}
}
]
},
"plugins": [
"import"
],
"settings": {
"import/parsers": {
"@typescript-eslint/parser": [
".ts",
".tsx"
]
},
"import/resolver": {
"typescript": {
"alwaysTryTypes": true,
"project": [
"./tsconfig.json"
]
}
}
}
}
ルールを追加したため、対応するパッケージをインストールする。
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
または
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
MUIを追加
リンク：
https://mui.com/material-ui/getting-started/installation/
https://zenn.dev/ttani/articles/next-materialui-setup
- 以下のコマンドを実行する。
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
または
yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material
mkdir src/utils/cache
touch src/utils/cache/createEmotionCache.ts
# サイト全体のthemeを変更する場合
mkdir src/theme
touch src/theme/theme.ts
キャッシュ関連の共通処理を追加
キャッシュ関連の共通処理を追加する。そのためにsrc/utils/cacheディレクトリを作成し、createEmotionCache.tsを作成する。
import createCache from '@emotion/cache';
export const createEmotionCache = () => {
return createCache({ key: 'css', prepend: true })
}
サイト全体のthemeを変更する
サイト全体のthemeを変更する場合、src/themeディレクトリを作成し、theme.tsを作成する。
import { createTheme } from '@mui/material/styles';
// Create a theme instance.
const theme = createTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: #d32f2f,
},
},
});
export default theme;
_app.tsxを変更する
_app.tsxを変更し、createEmotnionCacheとthemeを読み込むように変更する。
また、stylesが不要となったため、削除する。
import type { AppProps } from 'next/app';
import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import theme from '../theme/theme';
import { createEmotionCache } from '@utils/cache/createEmotionCache';
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
interface MyAppProps extends AppProps {
emotionCache?: EmotionCache;
}
function MyApp(props: MyAppProps) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<CacheProvider value={emotionCache}>
<Head>
<meta name='viewport' content='initial-scale=1, width=device-width' />
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
}
export default MyApp;
pages/index.tsxを書き換える
import type { NextPage } from 'next'
import { Button } from '@mui/material';
const Home: NextPage = () => {
return (
<>
<Button variant="contained">Hello World</Button>
</>
)
}
export default Home
Jestの設定
リンク：https://nextjs.org/docs/testing#jest-and-react-testing-library
-
以下のコマンドを実行する。
npm i -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
または
yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom -
package.jsonのscriptへの追加
"test": "jest --watch"
- jest.config.jsを作成
// eslint-disable-next-line @typescript-eslint/no-var-requires
const nextJest = require('next/jest');
const createJestConfig = nextJest({
dir: './',
});
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
module.exports = createJestConfig({
moduleDirectories: ['node_modules', '<rootDir>/'],
moduleNameMapper: {
'^@components/(.*)$': '<rootDir>/src/components/$1',
'^@pages/(.*)$': '<rootDir>/src/pages/$1',
'^@utils/(.*)$': '<rootDir>/src/utils/$1',
},
testEnvironment: 'jest-environment-jsdom',
});
src配下に__test__ディレクトリを作成し、テストファイルを用意すればテストが可能となる。