Next.js обеспечивает лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое. Конфигурация не требуется.

О чем будет рассказано в этой статье

  • Предпосылки;
  • Статические страницы;
  • Добавление бутстрапа;
  • Добавление сервера Express API;
  • Динамические страницы и маршруты;
  • Получение данных с сервера;
  • Серверный рендеринг;
  • Страница добавления сообщений;

Предпосылки

Прежде чем мы начнем, нам нужно будет создать пустой проект Next.js (если вы еще этого не сделали), в противном случае вы можете пропустить этот раздел.

Внутри пустой папки проекта запустите скрипт:

npx create-next-app --typescript

После выполнения скрипта вы увидите файлы и папки, необходимые для вашего простого проекта:

Это пакеты и скрипты, которые будут установлены:

Вы можете узнать больше о Next.js CLI здесь:



CLI | Next.js
Интерфейс командной строки Next.js позволяет запускать, создавать и экспортировать приложение. nextjs.org



Затем нам нужно будет запустить yarn dev скрипт (чтобы убедиться, что все работает должным образом), который запустит наше приложение Next.js в режиме разработки (перезапустится после изменений в файлах и получит данные на каждой странице. запрос → мы рассмотрим это позже)

Откройте браузер и введите localhost:3000. Вы должны увидеть такую ​​страницу:

Отлично. Теперь мы готовы добавить нашу первую статическую страницу.

Статические страницы

В Next.js страница - это компонент React, экспортированный из файла .js, .jsx, .ts или .tsx в каталоге /pages. Каждая страница связана с маршрутом на основе имени файла.

По умолчанию Next.js предварительно обрабатывает каждую страницу. Это означает, что Next.js заранее генерирует HTML для каждой страницы, вместо того, чтобы делать все это с помощью клиентского JavaScript. Предварительный рендеринг может улучшить производительность и улучшить SEO.

Другими словами → Next.js обработает ваш код, получит данные и т. Д. И только после этого вернет клиенту страницу Html.

Добавим pages/about.tsx файл:

Повторно запустите проект и посмотрите результаты на localhost:3000/about маршруте:

⚠️ ПРИМЕЧАНИЕ: что произойдет, если вы будете использовать именованный экспорт вместо по умолчанию:

Error: The default export is not a React Component in page: "/about"

Давайте изменим имя файла about на changed-about и посмотрим, что произойдет (на этот раз вам не нужно перезапускать проект):

Добавление бутстрапа

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

yarn add bootstrap

Все страницы в приложении Next.js обернуты компонентом, объявленным в файле _app.tsx. Это означает, что он добавит импорт стилей и панель навигации → они будут добавлены на каждую страницу, объявленную в папке /page.

Давайте добавим панель навигации из примера начальной загрузки Базовая навигация:

⚠️ ПРИМЕЧАНИЕ: если мы настроим маршруты в параметре href следующим образом:

<a className="nav-link" href="/changed-about">About</a>

Eslint выдаст ошибку 🆘:

ESLint: Do not use the HTML <a> tag to navigate to /changed-about/. Use Link from 'next/link' instead.

Мы можем исправить навигационные ссылки, используя компонент <Link/> из пакета next/link:

Добавление сервера Express API

Здесь мы создадим простой сервер API Express рядом с нашей папкой nextjs, чтобы наше приложение выглядело как готовое к производству 🙂

  1. Создайте /nextjs и переместите туда файлы проекта Next.js
  2. Создайте пустую /server папку:

3. В папке /server выполните следующие действия:

  • Запустите npm init (эта команда добавит файл package.json по умолчанию)
  • Беги yarn add express
  • Добавьте server.js файл с таким содержанием:
  • Запустить yarn add nodemon -D (nodemon будет перезапускать ваш сервер при каждом обнаружении изменения файла)
  • Добавьте start скрипт в ваш package.json файл:

Для перепроверки запустите пряжу start в папке /server. Вы можете убедиться, что все работает должным образом, открыв вкладку localhost:3001/posts в нашем браузере:

Наш проект должен выглядеть так:

Наконец-то мы готовы добавить Pages в приложение Next.js 🙂

Динамические страницы и маршруты

Динамические страницы

Мы уже проверяли простые страницы Статической генерации, когда добавляли /About страницу. Но что, если мы хотим динамически устанавливать маршруты и контент (данные будут извлекаться с сервера)?

Вы можете использовать три функции для получения данных для предварительного рендеринга:

Получение данных один раз при сборке

  • getStaticProps (Статическая генерация): получение данных во время сборки. Когда это использовать? Например, если у вас есть маршрут /my-route/1, и вы хотите получить данные для этой страницы. 👨‍💻
  • getStaticPaths (Статическая генерация): укажите динамические маршруты для предварительного рендеринга страниц на основе данных. Когда это использовать? Например, в настоящее время у вас есть две страницы: /home и /about, но через некоторое время вы решаете создать еще одну страницу /contacts. Или у вас есть маршруты типа / user / 1, / user / 2, но сколько пользователей будет в будущем - кто знает. getStaticPaths на помощь 👍

Получение данных по каждому запросу

  • getServerSideProps (рендеринг на стороне сервера): извлекать данные по каждому запросу. Когда это использовать? Когда содержимое страницы должно постоянно меняться каждый день / час, например, на странице товаров.

⚠️ ПРИМЕЧАНИЕ. Вы можете использовать любой подход извлечения, который вам нравится, но только эти три функции будут извлекать данные на стороне сервера.

Динамические маршруты

Если вы создадите файл с именем pages/posts/[id].js, он будет доступен по адресам posts/1, posts/2 и т. Д.

Давайте добавим папку /post с файлом [id].tsx:

[id].tsx содержимое файла с фиктивными данными (на данный момент нет соединения с BE)

{ fallback: false } means other routes should show 404 page.

Перезапустите приложение Next.js и посмотрите результаты:

Получение данных с сервера

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

Запустите сервер Express API, запустив yarn start скрипт в папке /server:

Далее нам нужно будет обновить nextjs/pages/post/[id].tsx файл:

Теперь файл [id].tsx должен выглядеть так

Результат должен быть таким же:

⚠️ПРИМЕЧАНИЕ. Получение данных внутри ловушки useEffect или любым другим способом за пределами функций getStaticProps, getStaticPaths или getServerSideProps будет работать точно так же, как и при рендеринге на стороне клиента, то есть данные будут извлечены на стороне клиента после js-скриптов. будет загружен, а не на сервере.

⚠️ ПРИМЕЧАНИЕ: при обновлении данных на сервере → данные будут обновляться при обновлении страницы только при запуске Next.js в режиме разработки yarn dev. Если вы запустите свое приложение в производственном режиме yarn start → данные будут извлечены ОДИН РАЗ при сборке, что означает, что даже если вы обновляете данные на сервере → страница Next.js данные НЕ обновляются. Мы можем исправить это, используя Серверную визуализацию (получение данных по каждому запросу) вместо Статической генерации. Давай сделаем это…

Серверный рендеринг

Замените getStaticPaths и getStaticProps новой функцией getServerSideProps. Теперь приложение Next.js будет запрашивать данные страницы каждый раз при каждом запросе.

Если данные не будут найдены на сервере !post → будет отображена страница 404

Как видите, мы не получаем / не устанавливаем маршруты. Next.js сделает это за нас. Теперь при каждом запросе страницы /post/123 → Next.js будет запрашивать данные с сервера post/123 для этой страницы и отображать страницу 404, например, если сервер не найдет /post/not-exist-in-database.

Страница добавления сообщений

Теперь мы можем добавить страницу /posts, которая будет отображать все доступные сообщения и перенаправлять пользователя на конкретную /post/:id страницу при нажатии ссылки.

Вот что мы будем реализовывать:

Вот как это будет выглядеть в нашем проекте:

Копипаст, пожалуйста ...

Спасибо за Ваше внимание. Я оставлю ссылку на репозиторий GitHub, если вы хотите проверить весь проект. Удачного кодирования 🎉



GitHub - nemrosim / next-js-basics
Постоянная ссылка Не удалось загрузить последнюю информацию о фиксации. Ссылка на Medium Run yarn start в папке / server. Запустить yarn dev… github.com



Если вам понравился этот рассказ, вы можете также проверить Список всех моих рассказов. Удачного кодирования!