2023年06月01日更新

環境構築

ストレージ効率が圧倒的に良いので pnpm を使う。

pnpm dlx create-next-app@latest

pnpm dlx create-next-app@latest

質問は/srs の質問以外 yes で回答。

✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use Tailwind CSS with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … Yes

✔ Would you like to use TypeScript with this project? … Yes
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use Tailwind CSS with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Use App Router (recommended)? … Yes
✔ Would you like to customize the default import alias? … Yes

自分やメンバーがうっかり npm や yarn を使わないよう、 package.json で制限。

package.json

{
  // ...
  "scripts": {
    "preinstall": "npx only-allow pnpm"
  }
  // ...
}

package.json

{
  // ...
  "scripts": {
    "preinstall": "npx only-allow pnpm"
  }
  // ...
}

Tailwind CSS デフォルトフォントの場合、Chrome と Safari で表示上の文字サイズが異なるため、日本語フォントを設定する。

globals.css

body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', Meiryo, sans-serif;
}

globals.css

body {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', Meiryo, sans-serif;
}

以下の対応を行う

app/layout.tsx の html を lang="ja" に変更
app/ ディレクトリから不要な vercel ロゴ画像などを削除

環境構築

関連ツイート