Отладка кода в Next.js — это процесс поиска и исправления ошибок в коде. Он включает в себя консольные логи, инструменты разработчика, отладку API, профилирование производительности и анализ ошибок.

1. Логи (console.log()) — Базовый уровень

Самый простой способ понять, что происходит в коде — использовать console.log().

В серверных компонентах (Server Components)

export default async function Page() {
    console.log('Этот код выполняется на сервере');
    return <h1>Привет!</h1>;
}

Лог появится в терминале при next dev или next start.

В клиентских компонентах (Client Components)

'use client';

export default function ClientComponent() {
    console.log('Этот код выполняется в браузере');
    return <h1>Привет!</h1>;
}

Лог появится в DevTools (F12 → Console).

Логирование пропсов и состояний

'use client';

export default function DebugComponent({ message }: { message: string }) {
    console.log("message:", message);
    return <h1>{message}</h1>;
}

Позволяет увидеть, какие данные приходят в компонент.

2. Использование debugger (Остановка кода)

Если в коде что-то не так, можно остановить выполнение и пошагово проанализировать значения.

В браузере (клиентский код)

1. Добавь debugger в код:

   'use client';
   export default function ClientComponent() {
       const name = 'Next.js';
       debugger; // Остановка кода
       return <h1>Привет, {name}!</h1>;
   }
   

2. Открой DevTools → Sources → (Ctrl + P) → выбери файл.
3. Перезагрузи страницу — браузер остановится на debugger, и ты сможешь пошагово смотреть переменные.

В серверном коде

Если ты используешь VS Code, можно установить breakpoint:

1. Открыть файл в VS Code.
2. Кликнуть слева от строки кода — появится красная точка.
3. Запустить Next.js с дебаггером:

   node --inspect-brk .next/standalone/server.js
   

4. В VS Code → Run & Debug → Attach to Node.js Process.

Теперь код остановится перед выполнением, и ты сможешь пошагово анализировать переменные.

3. Дебаг API Routes (app/api/)

Если твои API маршруты (app/api/route.ts) не работают, отладь их:

1. Логирование req и res

import { NextResponse } from 'next/server';

export async function GET(req: Request) {
    console.log("🔎 API запрос получен:", req);
    return NextResponse.json({ message: "Hello from API" });
}

Логи появятся в терминале при next dev.

2. Запросы через curl / Postman

Если fetch() или axios не работают, попробуй выполнить запрос напрямую:

curl -X GET http://localhost:3000/api/route

или в Postman / Insomnia.

4. Инструменты DevTools (Performance, Network)

1. Network (Проверка запросов)

1. Открой DevTools (F12) → Network.
2. Проверь, какие запросы отправляются, и нет ли ошибок 404, 500.
3. Если API медленный, попробуй:
   • Убрать ненужные запросы.
   • Кэшировать данные fetch с{ cache: 'force-cache' }

2. Performance (Оптимизация)

1. В DevTools → Performance нажми Start profiling.
2. Перезагрузи страницу.
3. Посмотри, какие компоненты загружаются дольше всего.

5. Анализ ошибок (error.tsx, console.error)

Если в Next.js появляется страница ошибки 500, можно создать глобальный обработчик ошибок:

1. Глобальная страница ошибки (error.tsx)

'use client';

export default function GlobalError({ error }: { error: Error }) {
    console.error("Ошибка:", error);
    return (
        <div>
            <h1>Что-то пошло не так!</h1>
            <p>{error.message}</p>
        </div>
    );
}

Теперь все ошибки в клиентских компонентах будут показываться на этой странице.

2. Обработчик ошибок API

export async function GET() {
    try {
        throw new Error('Ошибка API');
    } catch (error) {
        console.error('Ошибка API:', error);
        return NextResponse.json(
            { error: 'Internal Server Error' },
            { status: 500 },
        );
    }
}

Теперь ошибка не сломает сервер, а вернёт 500.

6. Проверка SSR, Streaming и Client/Server рендеринга

1. Как узнать, серверный или клиентский код?

console.log(
    typeof window === 'undefined'
        ? '👀 Код выполняется на сервере'
        : '🌎 Код выполняется в браузере',
);

Если typeof window === "undefined", значит код работает на сервере.

2. Как отследить SSR и Streaming?

Запусти Next.js в production-режиме, чтобы проверить, какие части рендерятся сервером:

pnpm build && pnpm start

Далее открой DevTools → Network → посмотри, какие запросы выполняются.

7. Дебагging с VS Code (Node.js Debugging)

Ты можешь дебажить Next.js в VS Code, добавив конфигурацию.

1. Открываем .vscode/launch.json

Добавь этот конфиг:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Next.js",
            "program": "${workspaceFolder}/node_modules/.bin/next",
            "args": ["dev"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

2. Запускаем дебаг

1. В VS Code → Run & Debug → Debug Next.js
2. Теперь ты можешь ставить breakpoints в коде!

Заключение: Полный чек-лист дебага Next.js

✅ Логи (console.log, console.error) — Базовый способ.
✅ debugger и VS Code Debugger — Остановка кода для анализа.
✅ Проверка API (curl, Postman, Network tab) — Если API не отвечает.
✅ Streaming Debugging (typeof window, console.log) — Чтобы понять, где выполняется код.
✅ Обработчики ошибок (error.tsx, try/catch) — Чтобы не ломать приложение.
✅ Performance Debugging (DevTools → Performance) — Чтобы ускорить рендеринг.

Теперь ты можешь быстро находить и исправлять ошибки в Next.js!