Next.js обеспечивает лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое. Конфигурация не требуется.
О чем будет рассказано в этой статье
- Предпосылки;
- Статические страницы;
- Добавление бутстрапа;
- Добавление сервера Express API;
- Динамические страницы и маршруты;
- Получение данных с сервера;
- Серверный рендеринг;
- Страница добавления сообщений;
Предпосылки
Прежде чем мы начнем, нам нужно будет создать пустой проект Next.js (если вы еще этого не сделали), в противном случае вы можете пропустить этот раздел.
Внутри пустой папки проекта запустите скрипт:
npx create-next-app --typescript
После выполнения скрипта вы увидите файлы и папки, необходимые для вашего простого проекта:
Это пакеты и скрипты, которые будут установлены:
Вы можете узнать больше о Next.js CLI здесь:
Затем нам нужно будет запустить 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, чтобы наше приложение выглядело как готовое к производству 🙂
- Создайте
/nextjs
и переместите туда файлы проекта Next.js - Создайте пустую
/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, если вы хотите проверить весь проект. Удачного кодирования 🎉
Если вам понравился этот рассказ, вы можете также проверить Список всех моих рассказов. Удачного кодирования!