Zenn
🐼

Next.js (Page Router) + TypeScript + Emotion の環境構築

2023/05/11に公開
Next.js
emotion
TypeScript
tech

今回はNext.js(Page Router) + TypeScript + Emotion の環境構築を公式ドキュメント等を参考に行っていきます。

https://nextjs.org/docs/getting-started/installation

バージョン

  • next v13.1.4
  • react v18.2.0
  • @emotion/react v11.10.5
  • typescript v4.9.4

前提条件

  • Node.js v16.8以上
  • macOS, Windows(WSLインストール済み), Linux
Node.jsのインストール方法

https://zenn.dev/y_2_k/articles/e419bcf729e82d

create-next-appでインストール

新規プロジェクトの場合はNext.jsが推奨するcreate-next-appを使って自動でインストールしましょう。

npx create-next-app@latest

実行すると、以下のプロンプトが表示されます。

What is your project named?  my-app 
-//プロジェクトの名前は？
Would you like to add TypeScript with this project?  Y/N 
-//TypeScriptは使いますか？
Would you like to use ESLint with this project?  Y/N
-//ESLintは使いますか？
Would you like to use Tailwind CSS with this project? Y/N
-//Tailwind CSSは使いますか？
Would you like to use the `src/ directory` with this project? Y/N
-//プロジェクトにsrcディレクトリを追加しますか？
What import alias would you like configured? `@/*`
-//どのようなインポートエイリアスを設定しますか?

※コメントアウトは日本語訳です。

インポートエイリアス

インポートエイリアスをデフォルトのまま入力した場合は以下のようになります。詳細については公式ドキュメントを確認してください。

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases

これでインストールは完了です！！

自分もこれでインストールしたかったんですけどね。既存のプロジェクトだったので、npmでインストールします。

npmでインストール

Next.jsで必須なのはnextとreactとreact-domです。任意でTypeScriptとESLintもインストールしましょう。自分は両方ともインストールしました。(ついでにprettierも)

npm install next@latest react@latest react-dom@latest

npm install --save-dev @types/node @types/react　typescript eslint eslint-config-next eslint-config-prettier prettier

package.jsonとconfigの設定

インストールを終えたので、package.jsonにscriptを追加し、その他configも設定していきます。

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
-   "start": "next start",
+   "start": "next build && next start", //bulid忘れ防止
    "lint": "next lint"
  }
}
}
next.config.js
module.exports = {
  reactStrictMode: true,
};
tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "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,
+   //インポートエイリアス
+   "baseUrl": ".",
+   "paths": {
+     "@/components/*": ["components/*"]
+   }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"]
}

これでcreate-next-appに追いつきました。次にEmotionを追加していきましょう。

Emotionの導入

公式ドキュメントでは十分な説明が見つからなかったので、以下の記事を参考に進めていきます。
https://zenn.dev/tatsuyasusukida/articles/easy-to-use-emotion-from-nextjs-12-2

Emotionのインストール

npm install @emotion/react
なぜ@emotion/styledをインストールしないのか

一貫性を保つためにもcss propsかstyled.componentsかのどちらかにすべきです。これはEmotionのBest Practicesでも書かれています。

Use the css prop or @emotion/styled, but not both
While the css prop and styled can peacefully coexist, it's better to pick one approach and use it consistently across your codebase. Whether you choose the css prop or styled is a matter of personal preference. (If you're curious, the css prop is more popular among the maintainers of Emotion.)

https://emotion.sh/docs/best-practices

configを設定する

@emotion/reactを利用するためにconfigを設定していきます。@emotion/styledの場合は不要のようです。

next.config.js
module.exports = {
  compiler: {
    emotion: true
  },
};
tsconfig.json
{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react"
  }
}

まとめ

create-next-appとnpm、2つのインストール法を紹介しました。今後Next.jsやEmotionの使い方の記事も挙げていこうと思います。

最終的なpackage.jsonとconfigファイルを載せておきます。

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
-   "start": "next start",
+   "start": "next build && next start", //bulid忘れ防止
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "next": "^13.1.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
  },
+ //以下、任意
+ "devDependencies": {
+   "@types/node": "^18.11.18",
+   "@types/react": "^18.0.27",
+   "eslint": "^8.32.0",
+   "eslint-config-next": "^13.1.4",
+   "eslint-config-prettier": "^8.6.0",
+   "prettier": "^2.8.3",
+   "typescript": "^4.9.4"
  }
}
next.config.js
module.exports = {
  reactStrictMode: true,
  compiler: {
    emotion: true
  },
};
tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "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,
+   //インポートエイリアス
+   "baseUrl": ".",
+   "paths": {
+     "@/components/*": ["components/*"]
+   },
    "jsxImportSource": "@emotion/react"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"]
}

Change log

8/7
Next.jsがApp Routerがstableになったことを受け、Page Routerであることを明記しました。

Discussion