🚀

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をインストールする。

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

npm install next-auth@beta

Recharts(チャート)

npm install recharts

react-device-detect(SP/PC判定)

npm install react-device-detect --save

zustand(状態管理)

npm install zustand

🔗APPENDIX

Next.js

Docs | Next.js

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

サンプルコード

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

Next.js - Example

vercel/next.js: The React Framework

Netflix clone