🚀 Основы Next.js: Погружение в современный фреймворк для React Привет! Сегодня разберём, что такое Next.js, почему его выбирают разработчики, как настроить проект и чем он лучше стандартного Create React App. 🚀 🔹 Что такое Next.js? Next.js — это фреймворк на основе React, который добавляет мощные возможности: серверный рендеринг (SSR), статическую генерацию (SSG), оптимизацию производительности и удобные инструменты для разработки. Почему он популярен? 1. SEO: SSR и SSG делают страницы индексируемыми поисковыми системами. 2. Производительность: оптимизация загрузки ресурсов, встроенная поддержка ленивая загрузки изображений. 3. Простота: минимальная настройка для работы с маршрутизацией, API и стилями. 4. Гибкость: возможность использовать как серверный, так и статический рендеринг. 5. Удобство: готовая интеграция с Vercel для деплоя. 🔹 Установка и настройка проекта Начать работать с Next.js просто: Установка проекта:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev

После этого проект будет доступен по адресу [http://localhost:3000](http://localhost:3000). Структура стандартного проекта: - pages/ — папка для маршрутов и страниц. - public/ — статические файлы (изображения, шрифты и т.д.). - styles/ — глобальные и модульные стили. 🔹 Архитектура папок 1. `pages/`: - Каждая .js или .tsx файл в этой папке автоматически становится маршрутом. - Например, файл about.js доступен по /about. - Поддерживается динамическая маршрутизация:

// pages/post/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const { query } = useRouter();
  return <div>Post ID: {query.id}</div>;
}
     

2. `public/`: - Хранит статические ресурсы, доступные напрямую. - Например, файл logo.png в этой папке будет доступен по /logo.png. 3. `styles/`: - Хранит глобальные стили (globals.css) и модульные стили (Component.module.css). - CSS-модули позволяют изолировать стили для каждого компонента. 🔹 Создание страниц Next.js использует файловую маршрутизацию: структура файлов в папке pages/ соответствует URL-адресам. Пример простой страницы:

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

После этого страница будет доступна по адресу /about. Динамические маршруты:

// pages/product/[id].js
import { useRouter } from 'next/router';

export default function Product() {
  const { query } = useRouter();
  return <h1>Product ID: {query.id}</h1>;
}

Этот подход позволяет создавать маршруты для страниц с параметрами, например, /product/123. 🔹 Next.js vs Create React App Преимущества Next.js: 1. Серверный рендеринг (SSR): улучшает SEO и время загрузки страниц. 2. Статическая генерация (SSG): рендерит HTML на этапе сборки. 3. API-маршруты: возможность создавать серверные эндпоинты прямо в проекте. 4. Оптимизация изображений: компонент <Image> автоматически обрабатывает загрузку и размеры. 5. Встроенная маршрутизация: не нужно подключать дополнительные библиотеки, как в Create React App. 🎯 Заключение Next.js — это мощный инструмент, который добавляет React приложению функциональности из коробки: рендеринг на сервере, генерацию статических страниц и многое другое. ReactJs Daily | #nextjs