Zenn
🚀

Next.js のセットアップ手順

2024/01/08に公開
Next.js
React
tech

🎯目的

Next.jsのセットアップ手順をまとめて、誰でも環境を構築できるようにする

🏃手順

💡事前準備

nodebrewをインストール
# インストール
$ brew install nodebrew

# nodebrewがインストールされたか確認
$ nodebrew -v

# npmも一緒にインストールされているか確認
$ npm -v

# セットアップ
$ nodebrew setup

# 以下のexport文を~/.zshrcもしくは~/.bash_profileに追記
$ vim ~/.zshrc
# export PATH=$HOME/.nodebrew/current/bin:$PATH

# 反映
$ source ~/.zshrc
nodeをインストール
# nodeをインストール
$ nodebrew install stable

# インストール済みのnodeバージョンの一覧を表示
$ nodebrew ls

$ nodebrew use 使用するnodeのバージョン
# ex) nodebrew use v18.8.0

🚀 プロジェクトを作成

npx create-next-app@latest プロジェクト名 --use-npm

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

# ショートカット
# npx create-next-app@latest プロジェクト名 --use-npm --ts --tailwind --eslint --app --src-dir

プロジェクトを作成したら、以下のコマンドで起動できます。

cd プロジェクト名
npm run dev

🖼️ globals.css を編集する

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

- :root {
-   --foreground-rgb: 0, 0, 0;
-   --background-start-rgb: 214, 219, 220;
-   --background-end-rgb: 255, 255, 255;
- }
- 
- @media (prefers-color-scheme: dark) {
-   :root {
-     --foreground-rgb: 255, 255, 255;
-     --background-start-rgb: 0, 0, 0;
-     --background-end-rgb: 0, 0, 0;
-   }
- }
- 
- body {
-   color: rgb(var(--foreground-rgb));
-   background: linear-gradient(
-       to bottom,
-       transparent,
-       rgb(var(--background-end-rgb))
-     )
-     rgb(var(--background-start-rgb));
- }
- 
- @layer utilities {
-   .text-balance {
-     text-wrap: balance;
-   }
- }

⬇️ライブラリをインストール

UI コンポーネント

Tailwind CSS ベースのUIフレームワークである Headless UI と shadcn/ui をインストールします。

# UI
npm install @heroicons/react
npm install @headlessui/react

以下の手順に従って、shadcn/uiをインストールする。

https://ui.shadcn.com/docs/installation/next

Dark / Light モードに対応させる場合は next-themes をインストールします。

npm install next-themes

SEO 対策

# SEO対策
npm install next-seo
npm install schema-dts  # json+ldを生成するためのライブラリ

データ取得

npm install @tanstack/react-query
src/components/providers.tsx
'use client'

import { ReactNode } from 'react'
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";

export default function Providers({ children }: { children: ReactNode }) {
    const queryClient = new QueryClient();
    return (
        <QueryClientProvider client={queryClient}>
            {children}
        </QueryClientProvider>
    );
}
src/app/layout.tsx
import Providers from "@/components/providers";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body>
+       <Providers>
          {children}
+       </Providers>
      </body>
    </html>
  );
}

OpenAPI

npm i openapi-fetch
npm i -D openapi-typescript typescript

Auth.js

https://authjs.dev/getting-started/installation?framework=Next.js

npm install next-auth@beta
Recharts(チャート)
npm install recharts
react-device-detect(SP/PC判定)
npm install react-device-detect --save
zustand(状態管理)
npm install zustand

icon

npm install simple-icons

🔗APPENDIX

Next.js

Tailwind CSS ベースのUIフレームワーク

サンプルコード

Vercel社公式のサンプルサイト

Next.js - Example

Netflix clone

Discussion