🚀 Что такое Next.js?
Next.js — это фреймворк на базе React, разработанный компанией Vercel. Он позволяет создавать быстрые, SEO-дружественные и масштабируемые веб-приложения. В отличие от чистого React, Next.js поддерживает серверный рендеринг, маршрутизацию "из коробки" и статическую генерацию.
---
🔧 Основные фишки
- Маршрутизация по файлам — просто создаёшь файл в папке pages, и он становится доступным по URL.
- Server-Side Rendering (SSR) — страницы рендерятся на сервере, что улучшает SEO и скорость загрузки.
- Static Site Generation (SSG) — можно заранее сгенерировать HTML, идеально для блога или лендинга.
- API Routes — можно создавать серверные эндпоинты прямо внутри проекта.
- Оптимизация изображений и шрифтов — встроенные компоненты для быстрой загрузки.
- Поддержка TypeScript, Tailwind CSS, Sass — всё легко подключается при создании проекта.
---
🛠️ Как начать
1. Установи Node.js и npm.
2. В терминале запусти:
`bash
npx create-next-app@latest
`
3. Ответь на вопросы (название проекта, TypeScript, ESLint и т.д.).
4. Перейди в папку проекта и запусти:
`bash
npm run dev
`
Готово — твой проект работает на http://localhost:3000.
---
📁 Структура проекта
- pages/ — страницы сайта.
- public/ — статические файлы (изображения, иконки).
- styles/ — стили.
- components/ — переиспользуемые компоненты.
- next.config.js — конфигурация проекта.
---
💡 Что дальше?
- Попробуй создать несколько страниц (about.js, contact.js) и поиграй с маршрутизацией.
- Добавь компонент <Link> для навигации.
- Освой getStaticProps и getServerSideProps для загрузки данных.
- Подключи Tailwind или Sass для стилизации.