✨
Next.js 14.0.4の簡易設定手順
はじめに
Next.js 14.0.4 を create next-app でインストールする簡易手順を紹介します。
この記事の対象者
- Next.js 14.0.4 を使ってみたい人
- インストール時の peer dependencies の警告を解消したい人（下記参照）
WARN Issues with peer dependencies found
.
├─┬ autoprefixer 10.0.1
│ └── ✕ unmet peer postcss@^8.1.0: found 8.0.0
├─┬ tailwindcss 3.3.0
│ ├── ✕ unmet peer postcss@^8.0.9: found 8.0.0
│ ├─┬ postcss-js 4.0.1
│ │ └── ✕ unmet peer postcss@^8.4.21: found 8.0.0
│ ├─┬ postcss-load-config 3.1.4
│ │ └── ✕ unmet peer postcss@>=8.0.9: found 8.0.0
│ └─┬ postcss-nested 6.0.0
│ └── ✕ unmet peer postcss@^8.2.14: found 8.0.0
└─┬ next 14.0.4
├── ✕ unmet peer react@^18.2.0: found 18.0.0
└── ✕ unmet peer react-dom@^18.2.0: found 18.0.0
Next.jsプロジェクトの新規作成
作業するプロジェクトを新規に作成していきます。
$ pnpm create next-app@latest next-14.0.4-sample --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
Library/pnpm/store/v3/tmp/dlx-2469 | Progress: resolved 1, reused 0, downlLibrary/pnpm/store/v3/tmp/dlx-2469 | +1 +
Library/pnpm/store/v3/tmp/dlx-2469 | Progress: resolved 1, reused 0, downlPackages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: /Users/hayato94087/Library/pnpm/store/v3
Virtual store is at: Library/pnpm/store/v3/tmp/dlx-2469/node_modules/.pnpm
Library/pnpm/store/v3/tmp/dlx-2469 | Progress: resolved 1, reused 0, downlLibrary/pnpm/store/v3/tmp/dlx-2469 | Progress: resolved 1, reused 1, downloaded 0, added 1, done
Creating a new Next.js app in /Users/hayato94087/Private/next-14.0.4-sample.
Using pnpm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next
╭──────────────────────────────────────────────────────────────────╮
│ │
│ Update available! 8.6.0 → 8.12.1. │
│ Changelog: https://github.com/pnpm/pnpm/releases/tag/v8.12.1 │
│ Run "pnpm add -g pnpm" to update. │
│ │
│ Follow @pnpmjs for updates: https://twitter.com/pnpmjs │
│ │
╰──────────────────────────────────────────────────────────────────╯
Packages: +329
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: /Users/hayato94087/Library/pnpm/store/v3
Virtual store is at: node_modules/.pnpm
Progress: resolved 337, reused 315, downloaded 14, added 329, done
dependencies:
+ next 14.0.4
+ react 18.0.0 (18.2.0 is available)
+ react-dom 18.0.0 (18.2.0 is available)
devDependencies:
+ @types/node 20.0.0 (20.10.0 is available)
+ @types/react 18.0.0 (18.2.42 is available)
+ @types/react-dom 18.0.0 (18.2.17 is available)
+ autoprefixer 10.0.1 (10.4.16 is available)
+ eslint 8.0.0 (8.54.0 is available)
+ eslint-config-next 14.0.4
+ postcss 8.0.0 (8.4.32 is available)
+ tailwindcss 3.3.0 (3.3.5 is available)
+ typescript 5.0.2 (5.3.2 is available)
WARN Issues with peer dependencies found
.
├─┬ autoprefixer 10.0.1
│ └── ✕ unmet peer postcss@^8.1.0: found 8.0.0
├─┬ tailwindcss 3.3.0
│ ├── ✕ unmet peer postcss@^8.0.9: found 8.0.0
│ ├─┬ postcss-js 4.0.1
│ │ └── ✕ unmet peer postcss@^8.4.21: found 8.0.0
│ ├─┬ postcss-load-config 3.1.4
│ │ └── ✕ unmet peer postcss@>=8.0.9: found 8.0.0
│ └─┬ postcss-nested 6.0.0
│ └── ✕ unmet peer postcss@^8.2.14: found 8.0.0
└─┬ next 14.0.4
├── ✕ unmet peer react@^18.2.0: found 18.0.0
└── ✕ unmet peer react-dom@^18.2.0: found 18.0.0
The integrity of 1508 files was checked. This might have caused installation to take longer.
Done in 9.9s
Initialized a git repository.
Success! Created next-14.0.4-sample at /Users/hayato94087/Private/next-14.0.4-sample
ディレクトリを移動します。
$ cd next-14.0.4-sample
Peer dependencies の警告が出ているので、pnpm install を実行し、警告を解消します。
WARN Issues with peer dependencies found
.
├─┬ autoprefixer 10.0.1
│ └── ✕ unmet peer postcss@^8.1.0: found 8.0.0
├─┬ tailwindcss 3.3.0
│ ├── ✕ unmet peer postcss@^8.0.9: found 8.0.0
│ ├─┬ postcss-js 4.0.1
│ │ └── ✕ unmet peer postcss@^8.4.21: found 8.0.0
│ ├─┬ postcss-load-config 3.1.4
│ │ └── ✕ unmet peer postcss@>=8.0.9: found 8.0.0
│ └─┬ postcss-nested 6.0.0
│ └── ✕ unmet peer postcss@^8.2.14: found 8.0.0
└─┬ next 14.0.4
├── ✕ unmet peer react@^18.2.0: found 18.0.0
└── ✕ unmet peer react-dom@^18.2.0: found 18.0.0
$ pnpm install postcss@latest
Packages: +7 -11
+++++++-----------
Progress: resolved 333, reused 324, downloaded 1, added 7, done
devDependencies:
- postcss 8.0.0
+ postcss 8.4.32
WARN Issues with peer dependencies found
.
└─┬ next 14.0.4
├── ✕ unmet peer react@^18.2.0: found 18.0.0
└── ✕ unmet peer react-dom@^18.2.0: found 18.0.0
$ pnpm install react@^18.2.0 react-dom@^18.2.0
Packages: +5 -5
+++++-----
Progress: resolved 333, reused 325, downloaded 0, added 5, done
dependencies:
- react 18.0.0
+ react 18.2.0
- react-dom 18.0.0
+ react-dom 18.2.0
これで警告が解消されました。
クリーンアップ
不要な設定を削除し、プロジェクトを初期化します。
styles
CSS などを管理する styles ディレクトリを作成します。globals.css を移動します。
$ mkdir src/styles
$ mv src/app/globals.css src/styles/globals.css
globals.css の内容を以下のように上書きします。
src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
初期ページ
app/page.tsx を上書きします。
src/app/page.tsx
import { FC } from "react";
type HomeProps = {};
const Home: FC<HomeProps> = (props) => {
return (
<div className="">
<div className="text-lg font-bold">Home</div>
<div>
<span className="text-blue-500">Hello</span>
<span className="text-red-500">World</span>
</div>
</div>
);
};
export default Home;
レイアウト
app/layout.tsx を上書きします。
src/app/layout.tsx
import "@/styles/globals.css";
import { FC } from "react";
type RootLayoutProps = {
children: React.ReactNode;
};
export const metadata = {
title: "Sample",
description: "Generated by create next app",
};
const RootLayout: FC<RootLayoutProps> = (props) => {
return (
<html lang="ja">
<body className="">{props.children}</body>
</html>
);
};
export default RootLayout;
TailwindCSSの設定
TailwindCSS の設定を上書きします。
tailwind.config.ts
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
plugins: [],
}
export default config
TypeScriptの設定
baseUrl を追加します。
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,
"plugins": [
{
"name": "next"
}
],
+ "baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
動作確認
ローカルで動作確認します。
$ pnpm dev
> next-trpc-sample@0.1.0 dev /Users/hayato94087/Private/next-trpc-sample
> next dev
▲ Next.js 14.0.4
- Local: http://localhost:3000
✓ Ready in 3.9s
無事動作しています。
コミット
コミットして作業結果を保存しておきます。
$ pnpm build
$ git add .
$ git commit -m "新規にプロジェクトを作成し, 作業環境を構築"
まとめ
- Next.js 14.0.4 を
create next-appでインストールする簡易手順を紹介しました。 - インストール時の peer dependencies の警告を解消しました。
Discussion