10 вещей, о которых стоит знать каждому разработчику на Next.js (но никто не рассказывает)

Вы уже развернули свой Hello World на Vercel, поигрались с getServerSideProps и чувствуете себя властелином React. Но за фасадом Next.js скрывается куда больше нюансов. Вот десять важных вещей, которые помогут прокачаться и не впадать в панику от внезапных багов 🧨

🚀 1. Статическая, серверная или клиентская загрузка — выбирай с умом

Next.js предлагает выбор подходов к загрузке данных:

• getStaticProps — статическая генерация

• getServerSideProps — серверный рендер

• useEffect — клиентская логика

🧠 Подходи к этому как шеф-повар: не каждое блюдо нужно готовить на заказ (SSR), некоторые стоит приготовить заранее (SSG), а другие подаются прямо из кладовки (CSR).

🧩 2. API Routes — это мини-серверные функции

Файлы в pages/api — это не просто код. Это настоящие серверлесс-функции. Без настройки Node-сервера, с мгновенным запуском. Но помни:

🔧 Не строи монолит. Логику лучше выносить в отдельные модули.

🧭 3. Роутинг на основе файлов — магия без React Router

Хочешь новый маршрут? Просто создай файл в pages/, и вуаля — маршрут готов.

Для динамических страниц:

pages/blog/[slug].js

✨ А для сложных случаев пригодятся маршруты-заглушки pages/blog/[...slug].js

📦 4. Размер бандла — тихий убийца производительности

100 КБ здесь, 50 КБ там… и страница загружается вечно.

• Используйте Bundlephobia перед установкой новых пакетов

• Применяйте dynamic() импорт:

const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), { ssr: false });

⚡ Это спасёт от лишнего веса при первом рендере.

🌍 5. Vercel — лучший друг, но не единственный

Next.js и Vercel — идеальная пара. Но никто не запрещает размещать проект на Netlify, AWS или даже Heroku.

🔥 Тем не менее, если хотите максимум от edge-функций и быстрой оптимизации изображений — Vercel пока вне конкуренции.

🖼️ 6. Оптимизация изображений встроена — пользуйтесь

Обычный <img> — это прошлый век. Используйте компонент <Image>:

import Image from 'next/image';
<Image src="/cat.jpg" alt="Котик" width={500} height={300} />

🪄 Поддержка lazy loading, адаптивные размеры, CDN — бонусом улучшает Lighthouse.

🔐 7. Middleware — новая точка контроля

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

import { NextResponse } from 'next/server';
export function middleware(req) {
  const loggedIn = checkAuth(req);
  if (!loggedIn) return NextResponse.redirect('/login');
  return NextResponse.next();
}

🛡️ Похоже на Express middleware, но на стероидах.

💅 8. CSS Modules, Tailwind или Styled Components? Всё поддерживается

• CSS Modules — по умолчанию

• Tailwind — для утилитарного стиля

• Styled Components / Emotion — для любителей компонентов со стилями

🚫 Только не стоит злоупотреблять inline-стилями.

🧪 9. Тестирование — не побочный квест

Хватит надеяться на удачу. Настройте тесты:

• Jest — для юнитов

• React Testing Library — для компонентов

• Cypress / Playwright — для end-to-end

🧘 Тесты в Next.js настраиваются легко и спасают кучу времени в будущем.

🧠 10. App Router vs Pages Router

С версии 13 появился app/ — новый способ маршрутизации с:

• React Server Components

• Вложенными layout'ами

• loading.tsx, error.tsx

• Server Actions (пока в бете)

Но старый добрый pages/ всё ещё стабилен.

📌 Выбирай подход под проект: надёжность или гибкие возможности.

🔄 Бонус: Хот-релоад работает… почти всегда

Если сломался — попробуй:

rm -rf .next
npm install

🤕 Или поплачь немного в терминал, если не помогает.

Заключение 🧘‍♂️

Next.js — мощный инструмент, который даёт суперспособности. Но с великой силой приходит и необходимость разбираться, что происходит под капотом. Эти 10+ вещей помогут избежать ловушек и построить не просто сайт, а полноценный опыт для пользователя.

🛠️ Работаешь ли над pet-проектом или следующим единорогом — каждый раз, когда набираешь npx create-next-app, помни: ты создаёшь не только код. Ты создаёшь впечатление.