Next.jsと周辺ツールの導入

Next.jsは、Reactを利用した静的及びサーバサイドレンダリングができるフレームワークです。

まずはNext.jsそのものに加えて、SCSS, Typescript, Prettierを追加で導入しておきましょう。

導入

nextjsの導入は、create-next-appを利用するのが便利です。

npm i create-next-app
npx create-next-app <アプリ名>

アプリ名は適当で良いです。

起動

スクリプトをビルドし、サーバを立ち上げるには

npm run dev

します。起動したら、http://localhost:3000/にアクセスしてページが表示されるか確認して完了です。

ここで、ESLintは何もしなくても自動で導入されているため、後から入れる必要はありません。もしVSCodeにESLintのExtensionを導入していない場合は、導入しておきましょう。

SCSSの導入

そのままではSCSSを利用できません。パッケージを導入する必要があります。

npm i -D sass

これで完了です。導入後に再度npm run devするとSCSSが読み込めるようになっています。

Typescriptの導入

もし最初の時点で有効にしておきたい場合、

npx create-react-app <アプリ名> --ts

で導入できます。

開発中のものに導入

途中までJavascriptで開発していたなどでcreate-react-app以外で導入したい場合、

npm i -D typescript

でパッケージを導入し、tsconfig.jsonをそのアプリの直下に、下の内容で配置すると良いです。

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

このconfigの内容は、create-react-appで作成したものと同じ設定です。

Prettierの導入

まずはVSCodeにExtensionを導入します。

次に、プロジェクトにもPrettierを導入します。

npm i -D prettier

あとは好みで、保存時に自動整形する設定を入れておくと良いです。

手動でformatする際はCtrl+Shift+Pを押し、Format Documentを選択してください。

設定の記述

このままでは各人によって設定がバラバラになってしまいます。個人開発の場合は何でも良いですが、チーム開発の場合にはコミット時の変更内容が大変なことになってしまうので、揃えておく必要があります。

設定は、.prettierrcかpackage.jsonにルールを記述します。

{
    "singleQuote": true,
    "semi": true
}

{
    // ...
    "prettier": {
        "singleQuote": true,
        "semi": true
    },
}

ここで、ESLintとコード整形とバッティングしないよう、下の設定ファイルを追加しておくと良いです。

{
    "extends": ["next", "next/core-web-vitals", "prettier"]
}

まとめ

Next.jsの導入ではcreate-next-appを用いるのが最も手っ取り早く、確実です。

各種周辺ツールを導入しておくことも忘れないようにしましょう。