Zenn
Open9

Next.js(React)駆け出しメモ

Next.js
React
村松龍之介村松龍之介

本格的なWebアプリを作っていくためにNext.js(React)を勉強しながら作ってみます！

村松龍之介村松龍之介

Installation

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

npx コマンドを使ってプロジェクトを作成

npx create-next-app@latest
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for next dev? › No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/riscait/Repositories/riscait/my-app.

以下の2つはデフォルトNo、それ以外はデフォルトYesです。
? Would you like to use Turbopack for next dev? › No / Yes
? Would you like to customize the default import alias (@/*)? … No / Yes

村松龍之介村松龍之介

プロジェクト構造

初めてのNext.jsの場合は見るべきとのこと
https://nextjs.org/docs/getting-started/project-structure

  • App Routerを選んでいるので pages はなく、 src/ ありを選んだので src/app になっているのか。
  • publicは後で必要になってくる感じかな
- src
  - app
- public

First commitをGitHubへプッシュ。
VS Codeからのpublishでリポジトリも作成してくれるの楽でありがたかった。

村松龍之介村松龍之介

Run the Development Server

npm run dev

上記コマンドでローカル起動！

http://localhost:3000 へアクセスして確認👀

app/page.tsx を編集してロゴイメージを差し替えて反映されることを確認🚀

public/images/app-icon.png に配置した画像は、 app/page.tsx で src="/images/app-icon.png" のパスで表示できた✍️

村松龍之介村松龍之介
  • Next.jsのApp Routerでは、デフォルトでServer Componentになり、サーバーサイドでレンダリングされる
  • use client ディレクトリを指定することで、その子コンポーネントはすべてClient Componentとなり、クライアントでレンダリングされる。

サーバー用のコンポーネントがクライアントで使用されることを防ぐ

まず、パッケージをインストール。

npm install server-only

対象のファイルでインポートする。

import 'server-only'
村松龍之介村松龍之介

ページファイルの役割

  • page.tsx: ルート（ページ）に対応するUI。デフォルトでサーバーコンポーネント。
  • layout.tsx: 複数のページ間で共有され、状態が保持されるUI。例えばヘッダーやナビゲーションバー。
  • template.tsx: 状態の保持が不要なUI（レイアウト）。

関数名

Next.jsにおいて、export default function の後の関数名は任意であり、特に決まった命名規則はありません。しかし、いくつかのベストプラクティスがあります。

  • 関数名を省略して匿名関数として扱うことも可能だが以下の理由で控える
    • Fast Refreshに対応しなくなる
    • デバッグ時に不便
  • パスカルケース
村松龍之介村松龍之介

CSSファイルのTailwindCSSディレクティブを警告を解消

Unknown at rule @tailwindcss(unknownAtRules)

  1. Tailwind CSS IntelliSenseをインストール
  2. VS Codeの設定ファイル（settings.json）に追記
  "files.associations": {
    "*.css": "tailwindcss"
  }