Проект создан на основании видеоурока, с целью изучения 13 версии Next.js.

Преимущество SSR(Server Side Rendering) перед CSR(Client Side Rendering).

1. SEO. При SSR на клиент отправляется уже готовая страница. При CSR - клиенту отправляется пустой HTML-файл, скрипт и данные. И далее уже происходит отрисовка интерфейса. Данный подход ухудшает индексацию данных на сайте, поисковыми роботами.

2. Скорость загрузки. Клиент при CSR должен скачивать много данных, в том числе и тех, которые ему не нужны на текущий момент. Особенно это заметно при первой загрузке данных на клиент. При SSR размер отправляемых данных меньше, т.к. часть логики остаётся на сервере и не отправляется клиенту. Весь код приложения автоматически разбивается на чанки и отправляется клиенту по мере необходимости.

3. Роутинг. Для CSR мы должны использовать вспомогательный пакет ReactRouter, чтобы реализовать роутинг в приложении. Для SSR роутинг просто выстраивается с помощью файловой структуры в папке app/ (которая создаётся в корне Next-приложения).

Пример:

|app/
|--page.js  	 // страница корневого роута (домашняя страница) https://localhost:3000/
|--posts/
|----page.js  	 // страница со списком постов https://localhost:3000/posts
|------new
|--------page.js // страница с новым постом https://localhost:3000/posts/new
|------[postId]
|--------page.js // страница с динамическим роутом https://localhost:3000/posts/1234

Динамические сегменты (параметры пути) передаются в качестве параметра params функциям layout, page, route и generateMetadata.

Пример:

export default function Page({ params }) {
  return <div>My Post: {params.postId}</div>
}

Параметры запроса получаем с помощь хука useSearchParams(). Пример:

const searchParams = useSearchParams();
const someFilter = searchParams.get('filter');

4. NextJS поддерживает SSR и/или SSG(Static Side Generation). Для SSG реализован механизм инкрементной регенерации статических сайтов - Incremental Static Regeneration (ISR). Данный механизм позволяет обновлять статический контент, без полной пересборки проекта.

---

Заметки по NextJS.

Основа.

1. В Next-приложении, компоненты бывают 2-х видов. По умолчанию все компоненты в папке app/ серверные. Чтобы сделать компонент клиентским, необходимо в файл (первой строкой) добавить директиву "use client".

2. Компонент серверный, если в нём:

• выполняем запрос на получение данных;
• получаем прямой доступ к бэкенд-ресурсам;
• храним чувствительную информацию (токены, ключи и пр);
• если в нём используется большое количество зависимостей.

3. Компонет клиентский, если в нём:

• есть слушатели событий (onClick, onChange etc);
• используются реакт-хуки;
• используется браузерный API;
• используются классовые реакт-компоненты.

4. NextJS-приложение сочетает в себе фронтенд и бэкенд логику. В папке app/ размещается папка api/ и в ней хранится вся логика связанная с бэкендом. Выстраивание файловой структуры в ней аналогично, тому как создаются роуты в папке app/, только вместо файлов page.js используются файлы route.js. Endpoint-ы в файле route.js представляют собой функции, имена который совпадают с названием HTTP-методов - GET, POST, PATCH и т.д. Таких функций может быть несколько в route.js, по одной на каждый метод.

Вспомогательные файлы.

Помимо файла page.js в каждой папке-роутере могут располагаться вспомогательные файлы - layout.js, loading.js, error.js.

1. Файл layout.js представляет собой некий шаблон, который отображается на всех дочерних роутах. layout.js расположенный в app/ будет использоваться на всех страницах. layout.js расположенный в app/posts будет использоваться только для маршрута https://localhost:3000/posts/ и всех роутов, которые являются дочерними по отношению к роуту posts/, например - https://localhost:3000/posts/new

2. Файл loading.js - содержит в себе компонент - загрузочный экран. Данный компонент как следует из названия, отображается, когда происходит загрузка данных. И загрузка данных именно в файле page.js который находится в одной директории с файлойлом loading.js.

3. Файл error.js - запускается автоматически если, по тому маршруту, где он расположен происходит ошибка. Внутри него мы имеем доступ, к возникшим ошибкам, а так же можем реализовать различную логику, как пример перенаправление пользователя на исходную страницу.

4. Файлы page.js, или layout.js могут содержать специальный объект metadata, в который можно передавать как статические, так и динамические данные. Эти данные попадают в тег head и используются для SEO и для задания заголовка(title) страницы в браузере.

Архитектура приложения.

app/ - директория со страница приложения. app/api - api-роуты с бэкенд-логикой. components/ - реакт-компоненты. models/ - модели для взаимодействия с БД. public/ - статика, изображения, видео и пр. styles/ - файл с глобальными стилями приложения. utils/ - файлы с утилитарными функциями.

Формируем страницу на основе реакт-компонентов. Там же выполняем запрос к api и получаем данные. Передаём данные компонентам, получаем готовую страницу.

---

Данное Next.js - приложение создано с помощью утилиты create-next-app.

Запуск в режиме разработки

Для запуска dev-сервера выполните следующую команду:

npm run dev
# или
yarn dev
# или
pnpm dev

Откройте в браузере вкладку по следующему адресу http://localhost:3000.

Изучить подробнее

Больше информации о Next.js, вы сможете получить следующих ресурсах:

• Next.js Documentation - особенности Next.js и API.
• Learn Next.js - интерактивный туторила по Next.js.

Развертывание на Vercel

Развернуть приложение можно на Vercel Platform. Больше информации по данной теме по ссылке Next.js deployment documentation.