Почему Next.js – идеальный выбор для старта в веб-разработке

Привет, сегодня расскажу, почему тебе стоит попробовать поработать с фреймворком Nextjs, какие его сильные стороны, а также почему это идеальный выбор для старта в веб-разработке.

Я работаю с Next.js достаточно долго, чтобы точно сказать, что это хороший универсальный фреймворк для огромного количества задач.

Работает из коробки

Next.js работает практически из коробки, создав проект одной командой, вы тут же можете увидеть результат в окне браузера. По умолчанию настроенный хот-релоадер позволит видеть изменения в коде налету, поддержка TypeScript, Tailwind, отсутствие необходимости настраивать сборщик — всё это огромный плюс для новичков.

Устанавливаем Nextjs вызовом одной команды

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 your code inside a `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 import alias (`@/*` by default)? … No / Yes

SSR | SSG

Существует два основных варианта использования Nextjs, необходимо изначально определиться с тем, какой проект вы пишете, чтобы в дальнейшем не пришлось рефакторить слишком много кода, ведь способы рендеринга влекут за собой разные подходы к разработке кода на Nextjs.

SSR (Server-Side Rendering) – рендерить страницы на стороне сервера, нужно это, как правило, чтобы в реальном времени обрабатывать данные с бэкэнда и отдавать сгенерированные страницы пользователю.

SSG (Static Site Generation) – сгенерировать все страницы сайта и сделать его статичным, отлично подходит для лендингов и небольших сайтов, контент которых меняется достаточно редко, взамен получаем огромную скорость работы и загрузки.

Встроенная маршрутизация

Удобная система маршрутизации, которая претерпела серьезные изменения, начиная с 13 версии. Маршрутизация основана на папках, вот простой пример:

• app
  • blog
    • [slug]
      • page.tsx
    • layout.tsx
    • page.tsx
  • layout.tsx
  • page.tsx

Название папки, в которой содержится файл page.tsx, становится маршрутом вашего сайта (https://sitename/blog), если папка названа [slug], то маршрут становится динамическим (https://sitename/blog/some-post-name), в будущих статьях я коснусь данной темы и подробно об этом напишу.

Обновления и поддержка

Next.js получает глобальное обновление каждый год, имеет огромное комьюнити, поэтому навряд ли вы столкнетесь с проблемой, решение которой вы не найдете в интернете.

Это действительно важно, можно не одну неделю провозиться с новым фреймворком и столкнуться с проблемами, которые перечеркнут всю проделанную работу, а решения так и не найти.

Синтаксис React

Больше всего в Nextjs мне нравится то, что вы пишете код на синтаксисе библиотеки React, не прибегая к специальным конструкциям. Вот пример простейшего кода:

export default function Page() {
  return (
    <div>
      <h1>Главный заголовок</h1>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet cum tempore debitis perspiciatis nam adipisci
        blanditiis neque, aperiam deleniti illo! Iste beatae nobis officia blanditiis aperiam earum aut quia ad.
      </p>
    </div>
  );
}

В следующих статьях постараюсь более детально разобрать некоторые темы, связанные с Nextjs, а также начну серию статей про создание лэндинга с нуля.