【Next.js】最新版の環境構築まとめ

$ cd project

$ yarn create next-app myapp --typescript

? Would you like to use ESLint with this project? › No / Yes
→ Yesにしましょう。
→ Next.jsにてデフォルトで使用するESLintです。

? Would you like to use `src/` directory with this project? › No / Yes
→ Yesにしましょう。
→ srcディレクトリ配下にソースコードをまとめていきます。

? Would you like to use experimental `app/` directory with this project? › No / Yes
→ Yesにしましょう。
→ Next.js 13にて導入されたもので、appディレクトリを使用した新しいルーティングシステムです。

? What import alias would you like configured? › @/*
→ デフォルトの「@/*」に設定しましょう。
→ importする際に「@」エイリアスが使えるようになり、絶対パスでimportすることができます。

.
.
.

Success! Created myapp at /Users/tomoki.imamura/project/myapp

✨  Done in 910.50s.

$ cd myapp

$ yarn dev

$ yarn add -D sass

import './globals.scss'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    .
    .
    .
  )
}

import { Inter } from '@next/font/google'
import Image from 'next/image'
import styles from './page.module.scss'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    .
    .
    .
  )
}

$ yarn add -D eslint-config-prettier eslint-plugin-sort-keys-fix eslint-plugin-typescript-sort-keys eslint-plugin-unused-imports

{
  "extends": ["next/core-web-vitals", "prettier"],
  "plugins": ["import", "sort-keys-fix", "typescript-sort-keys", "unused-imports"],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index",
          "object",
          "type"
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc"
        }
      }
    ],
    "import/no-duplicates": "error",
    "unused-imports/no-unused-imports": "error",
    "sort-keys-fix/sort-keys-fix": "error",
    "typescript-sort-keys/interface": "error",
    "react/jsx-sort-props": "error",
    "@next/next/no-img-element": "off"
  }
}

$ yarn add -D prettier

{
  "arrowParens": "always",
  "endOfLine": "lf",
  "jsxSingleQuote": true,
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2
}

$ yarn add -D stylelint stylelint-config-recess-order stylelint-config-standard stylelint-config-recommended-scss stylelint-config-prettier

{
  "extends": [
    "stylelint-config-recess-order",
    "stylelint-config-recommended-scss",
    "stylelint-config-standard",
    "stylelint-config-prettier"
  ],
  "rules": {
    "selector-class-pattern": "^[a-z][a-zA-Z0-9-]+$"
  }
}

{
    .
    .
    .
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --ignore-path .gitignore",
    "lint-fix": "next lint --ignore-path .gitignore --fix",
    "lint-style": "stylelint --ignore-path .gitignore './**/*.{css,scss}'",
    "lint-style-fix": "stylelint --ignore-path .gitignore --fix './**/*.{css,scss}'",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css,scss}'",
  },
  "dependencies": {
    .
    .
    .
  },
  "devDependencies": {
    .
    .
    .
  }
}

$ yarn lint
$ yarn lint-fix
$ yarn lint-style
$ yarn lint-style-fix
$ yarn format

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "scss.validate": false
}