🍭

✨Next.js入門✨ 思考停止・爆速開発テンプレ【TypeScript+ESLint+Prettier】

2020.12.17に公開2021.02.24に更新

はじめに

こんにちは。今回はNext.jsの新しいプロジェクト作成を脳死でやるためのテンプレートを用意しました。主に自分用ではありますが、毎回調べるのは煩わしいので書き留めておきます。おまけでチュートリアルも付けておきました！😁

環境

(VSCode)
Node.jsがインストール済み

1. Next.jsのプロジェクトを作成

Npxを使って新しいプロジェクトを作ります。$PROJECT_NAMEは適宜置き換えてください。

$ npx create-next-app $PROJECT_NAME

2. /pagesを/srcに格納

プロジェクトが肥大化すると見にくくなるため、/srcにコードをまとめます。

$ cd {$PROJECT_NAME}
$ mkdir src && mv pages src

3. Next.jsにTypeScriptを導入

Next.jsでTypeScriptが使えるようにします。プロダクションでは使用しないので、「devDependencies」としてインストールする -D オプションを使いましょう。

$ yarn add -D typescript @types/react @types/react-dom @types/node

4. ESLintとPrettierを導入

これらはエラーを事前に取り除いたり、コードを整形するためのものです。開発を効率化するためには必須です。

$ yarn add -D eslint prettier eslint-config-prettier

ESLintで使うプラグインもインストールします。

$ yarn add -D eslint-plugin-{react,react-hooks}
$ yarn add -D @typescript-eslint/{parser,eslint-plugin}

5. ESLintのルールを設定

好みでカスタマイズできますが、今回は省略して一般的なものを使います。以下のファイルを作成してください。

.eslintrc.json

{
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
    "commonjs": true
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly",
    "React": "writable"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "plugins": ["react-hooks", "react", "@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier",
    "prettier/react",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "react/prop-types": "off",
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off"
  },
  "overrides": [
    {
      "files": ["*.js"],
      "rules": {
        "@typescript-eslint/no-var-requires": "off",
        "@typescript-eslint/explicit-function-return-type": "off"
      }
    }
  ]
}

6. Prettierを設定

こちらも好みでカスタマイズ可能です。私はセミコロン有りのコードを使っていますが、気持ちの悪い方はオプションをいじってみてください。

.prettierrc.json

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
}

7. VSCodeで自動整形する

ESLintを手動で実行しようとすると95%忘れるので自動でやってもらいましょう。まず、VSCodeで以下のプラグインを検索して、インストールしてください。

ESLint
Prettier

...えっ？俺はVSCode使ってないって...？（それはごめん）

$ mkdir .vscode

.vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

8. next.config.jsを作成(オプション)

next.config.js: Introductionでその他のオプション一覧を見れます。このファイルでURLをリダイレクトする処理などを作成できます。

next.config.js

module.exports = {
  distDir: 'build',
  reactStrictMode: true,
  poweredByHeader: false,
}

9. package.jsonを編集(オプション)

"dev" : PCだけでなくスマホ等でも動作をチェックするため変更しています。
"start" : 私はGAEでNext.jsを動かすため、ポート8080で動くように変更しています。
"build" : たまにバグってしまうので、一度削除してからビルドします。
"lint" : ESLintを実行するためのコマンドを用意します。テストの自動化で役に立ちます。

package.json

{
  ...
  "scripts": {
    "dev": "next dev --hostname 0.0.0.0",
    "build": "rm -rf ./build && NODE_ENV=production next build",
    "start": "next start -p 8080",
    "lint": "eslint src/** --ext .ts,.tsx",
    "lint:fix": "eslint src/** --ext .ts,.tsx --fix && yarn format",
    "format": "prettier --config .prettierrc.json --write '**/*.tsx'",
  },
  ...
}

10. TypeScriptをかくぞ！(チュートリアル)

srcフォルダに移動しましょう。今の状況では、_app.jsがありますが、_app.tsxにリネームします。そして、下のようにコードを編集します。

_app.tsx

import React from 'react';
import '../../styles/globals.css';

interface Props {
  pageProps: any;
  Component: any;
}

export default class App extends React.Component<Props> {
  render(): JSX.Element {
    const { pageProps, Component } = this.props;

    return (
      <>
        <Component {...pageProps} />
      </>
    );
  }
}

index.jsも同様にindex.tsxにリネームして、編集します。

index.tsx

import React from 'react';
import Head from 'next/head';
import styles from '../../styles/Home.module.css';

const Home: React.FC = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.ts!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing <code className={styles.code}>pages/index.tsx</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a href="https://github.com/vercel/next.js/tree/master/examples" className={styles.card}>
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  );
};

export default Home;