環境変数

.envファイルに書いた値は、Node.jsのサーバープロセス内のメモリ上のオブジェクトにprocess.envとして注入される。 NEXT_PUBLICが接頭辞にある場合はビルド時にコードへ直接埋め込まれる。

NODE_ENV：

• NODE_ENVという環境変数が内部的に存在している。

  • NODE_ENV=development/production

.env.development/production：

• 実行モード（= NODE_ENV）に応じて読み込むファイルが切り替わる

ルーティングに含まないフォルダ

ルートグループ()でくくるとルーティングに含まれないフォルダになる。

• /app/(auth)/login.tsx , logout.tsx

アンダーバーをフォルダの先頭に書くと、それ以下のフォルダがすべてルーティングに含まれなくなる。

• /_components

ルートグループ毎に異なるレイアウト：

/app/layout.tsx 
/app/(auth)/layout.tsx
/app/(root)/layout.tsx

• トップページ("/")にしたい方にpage.tsxを置く

useState

set関数は呼ばれるたびに状態を更新し、その状態を使っているコンポーネント全体が再レンダリングされる。

再レンダリング：

• コンポーネント関数が再実行され、JSXが再生成される。

• 差分が計算されDOMに変更が必要ならDOMが変わる。

• Contextの状態更新：

  • Contextはルートのlayout.tsxにProviderを書くことが多いが、ルート以下がContextの状態変化ですべて再レンダリングされるわけではなく、useContextを使っている全てのコンポーネントが再レンダリングされる。

useEffect

useEffect（内で）は副作用（ = Reactのレンダーだけでは完結しない処理）を実行する。

副作用の例：

• fetchやlocalStorage、windowなどのブラウザAPI

• イベントの登録 / 削除

• DOM操作

実行順序

1. サーバーでレンダー（RSC）

2. HTMLを生成（SSR）

3. ブラウザに送信

4. Hydration（ここで初めてブラウザ環境）

5. useEffectを実行

"use client"を書いているからといって、そのファイルのコンポーネント（=関数）がブラウザだけで実行されるわけではない。ブラウザAPIやDOM操作をuseEffectの外に書いても"DOMParser not defined"みたいな警告が出るのは、サーバーでSSR（HTML生成）されるプロセスで関数が実行されるのが理由

クリーンアップ関数

イベントリスナーやタイマーのような継続的に動く副作用ではクリーンアップが必要

• setInterval

• addEventListener

• WebSocket

• Observer

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // クリーンアップ関数（タイマーを解除）
    return () => {
      clearInterval(interval);
    };
  }, []);

• useEffectのcleanup（return）は「同じeffect が再実行される直前」と「アンマウント時」 に実行される

クリーンアップが必要な理由：

• イベントが残って二重で呼ばれる

• メモリリーク（プログラムが使わなくなったメモリを解放できず占有し続ける）

• コンポーネントがアンマウントされた後も処理が走る

props

コンポーネントのpropsにはほぼ何でも渡すことが出来る。

<LinksItem setCount={setCount} Component={Button} />

スプレッド構文：

<MobileNavigation {...currentUser} />

• オブジェクトのプロパティがたくさんある場合、スプレッド構文でpropsを渡せる。

// 受け取る側

const MobileNavigation = ({
  ownerId,
  accountId,
  fullName,
  avatar,
  email,
}: Props) => {
 return (
 ) 
}

useRef

const inputRef = useRef<HTMLInputElement>(null);

const focusInput = () => {
  inputRef.current?.focus();
};

• useRefはDOMの参照に使うことが多い。

• useRefは状態と違いrefの値を書き換えても再レンダリングされない。

動的ルート

app/[slug]/page.jsx ：

• [] の中の文字は任意で良い（[slug]、[id] ）

• [] の中身は 「パラメータ名」 または 「動的セグメント名」 と呼ぶ

動的セグメントの取得

サーバー：

const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
  const { slug } = await params;
  return <div>Page: {slug}</div>;
};

• layout.tsx/page.tsx でしか取得できない

クライアント：

"use client";
import { useParams } from "next/navigation";
import React from "react";

const Page = () => {
  const { slug } = useParams();
  return <div>Page: {slug}</div>;
};

• どのクライアントコンポーネントでも useParams()が使える

generateStaticParams

• generateStaticParamsはビルド時に動的ルートのパターンを列挙して静的HTMLを生成する機能 = SSG（Static Site Generation）

  • SSGはNextjsに固有の機能ではない。

• 静的HTMLなのでページの表示が早い。

• ビルド後に.next/server/app フォルダを見ると、パターン分のHTMLファイルが作成されたのが確認できる。

• searchParams（ ?page=1&query=test ）はリクエスト時に初めて決定される動的な値なのでSSGに出来ない

[slug]/page.tsx：

export async function generateStaticParams() {
  const posts = await prisma.posts.findMany()
  return posts.map((post) => ({ slug: post.slug }));
}

const Page = async ({
  params,
}: {
  params: Promise<{ slug: string }>;
}) => {
  const { slug } = await params;
  const post = await getSinglePost(slug);

  if (!post) {
    notFound();
  }

• [slug]や[id]のパターンをgenerateStaticParams()で配列としてreturnする。

Link：prefetchの無効化

ブログや商品一覧のようなトップページに複数のLink-Cardを表示しているNextjsアプリの場合、トップページにアクセスした時に大量のprefetchが行われていることが検証ツールで確認できる。

prefetch：

• ページの切り替えを早くするためにLinkタグ（同サイト内での遷移を行う）がビューポートに入った時点で、遷移先のRSC PayloadをfetchするNextjsの機能

• Linkタグが多いNextjsサイトの場合、VercelのUsageを少しでも減らすためにOFFにした方がいい。

<Link prefetch={false} >