Создание сайтов в Макеевке, ДНР. Руководство для начинающих по маршрутизации в Next.js с примерами

Использование Next.js дает много преимуществ, но одна очень полезная функция — это система маршрутизации файлов. Эта архитектура значительно упростила процесс создания маршрутов на веб-сайте. В этом руководстве мы узнаем, как настроить проект Next.js и как работает система маршрутизации файлов в Next.js.

Мы также научимся:

создавать статические и динамические страницы

реализовать переход страницы с помощью Link, а также некоторые его реквизиты

используйте useRouter () хук, чтобы получить параметр запроса из URL-адреса

вкладывать маршруты динамически

...и многое другое.

Мы узнаем все это, создав страницу портфолио.

Возможности Next.js

Next.js — это веб-фреймворк на основе React, созданный поверх Node.js. Поскольку он основан на React, он также следует архитектурному дизайну компонентов.

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

Это также позволяет использовать рендеринг на стороне сервера для создания динамических веб-страниц (страниц, которые меняются каждый раз, когда пользователь делает новый запрос).

Архитектура маршрутизации в Next.js позволяет очень легко создавать и связывать страницы вместе. Мы можем динамически передавать параметры запроса и создавать динамические страницы, не выходя из pagesпапки.

Зачем использовать Next.js

Фреймворк Next.js был впервые выпущен 25 октября 2016 года. С тех пор он стал одним из самых популярных веб-фреймворков по нескольким причинам.

Во-первых, Next.js — это, по сути, React. Это отличная новость для огромного сообщества разработчиков с опытом работы с React. Разработчики по-прежнему могут использовать некоторые функции React, такие как архитектура компонентов, JSX и многое другое.

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

Как уже было сказано, одной очень полезной функцией является система маршрутизации файлов в Next.js, которая значительно упростила процесс создания маршрутов на веб-сайте. Таким образом, вы можете создать кучу.jsфайлов в одной папке с именем pages, которую Next.js будет использовать для всех ваших маршрутов. Это не только полезно, но и очень мощно.

Проэкт

На сайте будет два простых маршрута и два динамических маршрута (мы вернемся к их значению позже).

Страница Projectsотобразит список проектов. Нажав на кнопку «Просмотреть больше «, мы будем перенаправлены на одну страницу проекта.

На blogстранице будет отображаться список сообщений в блоге, и мы также можем просмотреть одну страницу блога, нажав «Подробнее «. Страница будет содержать подробную информацию о конкретном сообщении.

Чтобы продемонстрировать вложенность маршрутов в Next, мы также создадим вложенный /commentsмаршрут для каждого поста в блоге. Например, мы можем просмотреть комментарии к первому сообщению, посетив localhost:3000/blog/first-post/comments.

Вот предварительный просмотр проекта:

Вы можете получить код из репозитория GitHub, запустить его на своем компьютере и настроить по своему усмотрению. Вы можете удалить мои изображения и переместить свои в /publicпапку. Вам нужно только изменить имена файлов в разметке.

Начиная

Чтобы начать работу с Next, на вашем компьютере должен быть установлен Node.js. Версия Node не должна быть ниже 12.x. Вы можете проверить версию, набрав node -vв командном терминале.

Если у вас не установлен Node.js или у вас более старая версия, вы можете загрузить последнюю версию отсюда.

После загрузки нам нужно будет инициализировать наш проект. Мы можем сделать это как автоматически, так и вручную. В этом руководстве мы будем использовать create-next-appгенератор кода для автоматического создания рабочей среды.

Перейдите в папку, в которой вы хотите разместить проект, и введите следующую команду:

cd your/path

npx create-next-appnext-portfolio

Наконец, выполните следующую команду:

npm run dev

Вы должны увидеть следующее в окне терминала, если все прошло хорошо.

Все готово для проекта

Мы можем просмотреть страницу в веб-браузере по адресу http: //localhost:3000.

Следующий проект уже запущен

Файловая архитектура маршрутизации в Next.js

Когда мы запустили эту команду, мы создали папку с именем next-portfolioвнутри текущего каталога. Внутри next-portfolioвы найдете несколько важных папок и файлов.

Структура каталогов приложений

Папка, с которой мы будем работать чаще всего, это pages. В Next каждый.jsфайл, определенный внутри pages, сопоставляется с маршрутом с таким же именем:

pages/about.jsбудет отображаться на/about

pages/contact.jsбудет отображаться на/contact

pages/blog.jsбудет отображаться на/blog

Вот высокоуровневое представление папки pages внутри типичного проекта Next:

my-site

└── pages

└── api // API routes

├── _app.js // custom route (will **not** be used as a route)

├── index.js // index route (will be rendered at my-site.com)

├── about.js // predefined route (will be rendered at my-site.com/about)

├── contact.js // predefined route (will be rendered at my-site.com/contact)

└── blog

├── index.js // index route for blog (will be rendered at my-site.com/blog)

├── author.js // predefined route (will be rendered at my-site.com/blog/author)

├── [blog-id].js // handles dynamic route (will render dynamcially, based on the url parameter)

└── [...slug].js // handles catch all route (will be rendered at all routes following my-site.com/blog)

Каждый компонент React будет упакован в виде.jsфайла, содержащего разметку и логику для каждой страницы.

Общая папка

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

Мы будем использовать следующие изображения на различных страницах нашего сайта-портфолио:

Личное фото. Это будет использоваться на главной странице (index.js).

Четыре иконки социальных сетей. Это будет использоваться на странице контактов (contact.js).

Пользовательские страницы

Возможно, вы заметили страницу _app.jsв папке ваших страниц. Эта страница является пользовательской страницей. Пользовательские страницы не используются Next.js в качестве маршрутов и имеют префикс подчеркивания (_).

Next.js использует _app.jsдля инициализации веб-страницы. Этот компонент инициализирует приложение и передает pagePropsсвойство, которое является данными, необходимыми для всех вложенных компонентов на нашем веб-сайте.

Будучи корневым компонентом, мы можем определить макет, который мы хотим сохранить на всех страницах.

Мы также можем использовать глобальную таблицу стилей, которая применяется ко всем элементам, как в следующем примере:

//next-portfolio/pages/_app.js

import Layout from '.../components/Layout’

import '.../styles/globals.css’

function MyApp ({ Component, pageProps }) {

return (

 

) ;

}

export default MyApp

Индексные маршруты

Всякий раз, когда мы переходим к индексным маршрутам (также известным как домашние страницы), таким как my-site.com, my-site.com/blogили my-site.com/projects, Next.js будет читать любые файлы из этого каталога с именем index.js.

Таким образом, по сути, pages/index.jsвозвращает разметку для домашней страницы, которая отображается по адресу localhost:3000. pages/blog/index.jsвозвращает разметку домашней страницы блога, расположенную по адресу localhost:3000/blog.

В редакторе кода перейдите на главную страницу и удалите все содержимое файла. Для целей тестирования используется следующая разметка:

// next-portfolio/pages/index.js

import Image from 'next/image’

import Link from 'next/link’

export default function Home () {

return (

 

 

)

}

Примечание: перейдите в next-portfolio/stylesтекстовый редактор и удалите Home.module.css, так как он нам вообще не понадобится.

Теперь сохраните изменения в файле и откройте http: //localhost:3000. Изменения в файле индекса отразятся на маршруте индекса.

Привет мир

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

По этой причине нам нужно сначала создать некоторые другие страницы, прежде чем создавать нашу домашнюю страницу.

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

Во-первых, мы создадим два статических маршрута для нашего сайта-портфолио. Эти маршруты отображают статические данные: они не используют параметр запроса из URL-адреса для отображения данных.

Два статических маршрута, которые мы создадим, это about.jsи contact.js. Эти файлы будут для маршрутов /aboutи соответственно. /contact

Для этого перейдите next-portfolio/pagesи создайте новый файл с именем about.js. Разметка для страницы «О программе» будет находиться внутри нее:

// next-portfolio/pages/About.js

export default function About () {

return (

 

 

)

}

Примечание: конечно, вы можете настроить контент под свой набор навыков, если хотите!

Теперь, пожалуйста, сохраните изменения в файле, перейдите next-portfolio/styles/globals.cssи введите следующие стили:

@import url ('https: //fonts.googleapis.com/css2? family=Lato: wght@300&display=swap’) ;

html,

body {

padding: 0;

margin: 0;

font-family: «lato», sans-serif;

font-size: 20px;

background-color: #D7E5f0;

}

* {

box-sizing: border-box;

}

h1 {

font-size: 60px;

}

.logo {

font-weight: 600;

font-size: 30px;

}

p {

font-size: 20px;

font-weight: 600;

line-height: 1.2;

}

a {

text-decoration: none;

color: black;

}

.container {

margin: 0 auto;

max-width: 1200px;

}

Примечание: еще раз, идите в город, если хотите другой набор стилей.

Сохраните изменения. В веб-браузере перейдите по адресу http: //localhost:3000/about.

Текущая страница «О нас»

Наконец, для статических страниц создайте contact.jsфайл внутри pagesи создайте Contactкомпонент, например:

// next-portfolio/pages/Contact.js

import Image from 'next/image’

export default function Contact () {

return (

 

 

)

}

Из этого компонента мы возвращаем страницу, содержащую ссылки на социальные сети, а также контактную форму.

Что касается ссылок, вы заметите, что мы импортировали и использовали Imageкомпонент, предоставленный next/image.

Компонент Imageпомогает создавать более оптимизированные и отзывчивые изображения, которые масштабируются вместе с размером окна браузера.

Чтобы улучшить стиль, не стесняйтесь копировать следующие стили и вставлять их в глобальную таблицу стилей:

/* next-portfolio/styles/globals.css */

/* CONTACT PAGE */

.link {

width: 500px;

display: flex;

justify-content: space-between;

align-items: center;

margin: 5px 0;

font-size: 17px;

}

input {

height: 50px;

width: 500px;

margin: 10px 0;

font-size: 17px;

padding-left: 3px;

}

input[type=submit] {

background-color: blue;

color: white;

border: none;

}

Сохраните изменения в файле и перейдите по адресу http: //localhost:3000/contact.

Наша текущая страница контактов

Переходы маршрутов на стороне клиента

Создание страниц — это один процесс. Пользователь также должен иметь возможность перемещаться между этими страницами. Две из четырех страниц уже реализованы, теперь давайте закончим домашнюю страницу. Во-первых, мы идем в файл индекса и модифицируем Homeкомпонент, например так:

// pages/index.js`

import Image from 'next/image’

import Link from 'next/link’

export default function Home () {

return (

 

 

)

}

Если вы когда-либо реализовывали маршрутизацию на стороне клиента в приложении React, возможно, вы знакомы с Linkкомпонентом React из React Router.

Next.js также предоставляет нам аналогичный компонент, который мы импортировали из next/link.

Компонент

используется для реализации переходов страниц в приложении Next. Самая большая особенность этого компонента заключается в том, что он позволяет вам передавать параметры запроса в useRouter, что вы используете для отображения контента на динамических маршрутах.

Внутри разметки JSX мы регистрируем компонент и передаем допустимые hrefатрибуты, указывающие страницы, на которые мы хотим ссылаться из меню навигации.

Компонент также может принимать несколько свойств, некоторые из которых показаны в следующих разделах.

as

Иногда вы можете захотеть использовать собственный URL-адрес, вероятно, чтобы сделать URL-адрес более читабельным и семантическим.

Для этого вы можете передать asсвойство в Link, например:

•  

  About me

   

•  

  Contact me

   

•  

  Blog

   

•  

  Projects

   

Изображение как

preFetch

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

 

About me

 

Теперь сохраните файл. Не стесняйтесь использовать следующие стили в вашей глобальной таблице стилей:

/* next-portfolio/styles/globals.css */

/* HOME PAGE */

.navbar {

display: flex;

align-items: center;

justify-content: space-between;

}

.navbar ul {

display: flex;

}

.profile {

display: flex;

max-width: 900px;

margin: 180px auto;

}

li {

list-style-type: none;

}

.navbar a {

text-decoration: none;

color: rgb (59, 58, 58) ;

margin: 0 25px;

transition: 0.2s;

}

.navbar a: hover {

background-color: blue;

color: white;

padding: 8px 8px;

border-radius: 6px;

}

.intro {

margin: 0 90px;

}

.contact a {

margin: 0 15px;

}

Сохраните стили в файл и перейдите по адресу http: //localhost:3000 в веб-браузере.

Текущая домашняя страница

Нажав на «Контакты «в меню навигации, вы увидите, что теперь мы можем перейти с домашней страницы на страницу «Контакты».

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

В Next.js динамические маршруты — это специальные маршруты, которые динамически отображают содержимое в зависимости от запроса idиз URL-адреса.

Динамические маршруты обрабатываются специальными файлами, определенными по [param].jsсоглашению. paramполучается из объекта запроса.

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

blog/first-post.jsдля/blog/first-post

blog/second-post.jsдля/blog/second-post

blog/third-post.jsдля/blog/third-post

...мы можем определить одну динамическую страницу для обработки любого динамического маршрута в /blog:

блог/[идентификатор блога].js

Всякий раз, когда осуществляется переход по любому из вышеуказанных URL-адресов, например, в следующем:

• Visit my first post

// 1 is the blog-id which will get sent to the dynamic component

...внутри динамического компонента мы можем получить доступ к идентификатору запроса (то есть 1, 2, 3, first-postи т. д.) из URL-адреса.

Мы делаем это, импортируя и вызывая хук useRouter (). Затем мы деконструируем paramзначение из routerобъекта и решаем, что отображать на основе этого.

Итак, если вы перейдете на blog/1домашнюю страницу, число: id1 можно получить следующим образом:

import {useRouter} from 'next/router’

export default function Blog () {

const router = useRouter () ;

const {id} = router.query;

return (

 

 

)

}

Вы также можете использовать строки запроса вместо полных URL-адресов:

• Visit my first post

Примечание. Как правило, вы запрашиваете базу данных, используя идентификатор запроса, а затем извлекаете соответствующую запись данных, которая будет отображаться на динамической странице. В этом уроке я буду использовать фиктивные данные JSON, чтобы все было проще.

Создание страницы проектов

Первая динамическая страница будет для проектов.

Внутри pagesсоздайте новую папку с именем projects. Затем в новой папке создайте файл с именем index.js.

Этот файл вернет то, что отображается при просмотре http: //localhost:3000/projects в веб-браузере. Другими словами, это будет домашняя страница для /projects.

Нам также нужны фиктивные данные JSON для проектов. Внутри pagesсоздайте файл с именем projects.json. Затем создайте массив своих собственных проектов, например:

// next-portfolio/pages/projects.json

[

{

«id»: 1,

«cover»: «https: //uploads.sitepoint.com/wp-content/uploads/2021/10/1633599028SkilllzLanding.png»,

«title»: «Skilllz»,

«slug»: «projects/first-project»,

«excerpt»: «A Sleek Purple Landing Page For an online training platform. Learn some important CSS concepts by building a landing page»

},

{

«id»: 2,

«title»: «Movie Generator App»,

«cover»: «https: //uploads.sitepoint.com/wp-content/uploads/2021/10/1633599458moviegenerator.png»,

«slug»: «projects/second-project»,

«excerpt»: «Learn how to build CRUD applications with React and HarperDB. This in depth tutorials covers a lot about API integartion»

},

{

«id»: 3,

«title»: «Hacker News Clone»,

«cover»: «https: //uploads.sitepoint.com/wp-content/uploads/2021/10/1633599423hackernewsclone.png»,

«slug»: «projects/third-project»,

«excerpt»: «Have you always wanted to clone a web page? Build a Hacker News Clone using React and HarperDB. Get started with it now»

}

]

JSON содержит данные проектов, которые мы хотим отобразить по адресу http: //localhost:3000/projects.

После этого мы внесем эти данные в разметку, вот так:

// next-portfolio/pages/projects/index.js

import Portfolios from '.../projects.json’

import Link from 'next/link’

export default function Projects () {

return (

 

View More

 

 

) }

) }

 

 

 

 

)

}

Первым делом мы импортировали данные. Затем мы сопоставили каждый проект с шаблоном JSX с помощью map () функции JavaScript.

Нам также нужно сделать его более презентабельным, поэтому смело используйте следующие стили:

// next-portfolio/styles/globals.css

/* PROJECTS */

.projects {

display: grid;

grid-template-columns: repeat (2, 1fr) ;

}

.project img {

height: 100px;

width: 200px;

}

.project a {

color: white;

background-color: black;

padding: 10px 10px;

border-radius: 6px;

}

.project {

max-width: 500px;

background-color: blue;

border-radius: 6px;

color: white;

padding: 30px 30px;

margin: 30px 0;

}

Чтобы просмотреть страницу в браузере, перейдите по адресу http: //localhost:3000/projects.

Список проектов

Единая страница проекта

Теперь нам нужно реализовать динамический маршрут для отображения одного проекта. Поэтому, если мы перейдем к http: //localhost:3000/projects/1, будет отображен первый проект.

Внутри папки проектов pagesсоздайте новый файл с именем [project].js.

Этот файл будет отображать динамическую страницу для одного проекта, например on projects/1и projects/2 т. д.

Внутри файла мы определяем шаблон, который будет использоваться для одной страницы проекта, например:

// next-portfolio/pages/projects/[project].js

import {useRouter} from 'next/router’

export default function Project () {

const router = useRouter () ;

const {project} = router.query;

return (

 

 

)

}

Примечание: из объекта маршрутизатора мы получаем идентификатор запроса из объекта запроса. Как правило, вы используете этот ключ, чтобы сделать запрос API для соответствующей записи. Таким образом, вы также можете отобразить сообщение об ошибке в случаях, когда соответствующий проект не найден в базе данных.

Поскольку у нас нет API для запроса проекта, вместо этого мы отображаем URL-слаг вместе с некоторым статическим текстом lorem ipsum. Слизняк определяет, какая страница отображается.

На следующем изображении показано, как страница может меняться в зависимости от URL-адреса.

Единая страница проекта

Вложенные маршруты

Возьмем, к примеру, блог. Когда пользователь переходит к my-site.com/blog, отображается список сообщений в блоге.

Когда пользователь переходит к my-site/blog/first-post, отображается первая запись в блоге. И когда они перейдут на my-site/blog/first-post/comments, там будут все комментарии, относящиеся к первому сообщению. Это называется вложением маршрутов.

В Next.js вы также можете вкладывать динамические маршруты. Каждый дочерний маршрут может получить доступ к запросу: idродителя. Таким образом, my-site.com/blog/first-post/commentsон будет отличаться, скажем, от my-site.com/blog/second-post/comments, потому что вы можете проверить публикацию: idпо URL-адресу или объекту запроса, используя useRouter ().

На самом деле, мы будем делать что-то подобное со страницей нашего блога. Каждое сообщение в блоге будет иметь свой собственный набор комментариев. Другими словами, мы будем вкладывать динамическую страницу с именем [comments].jsв другую динамическую страницу с именем [blog].js.

Создание главной страницы блога

Прежде чем перейти к вложению маршрутов, мы сначала создадим домашнюю страницу блога.

Для этого перейдите в next-portfolio/pagesпапку и создайте папку с именем blog. Внутри новой папки создайте файл с именем index.js.

Этот файл вернет то, что отображается по адресу http: //localhost:3000/blog. Другими словами, это домашняя страница для этого маршрута.

Далее мы создаем данные для постов в блоге:

// next-portfolio/pages/posts.json

[

{

«id»: 1,

«cover»: «https: //uploads.sitepoint.com/wp-content/uploads/2021/10/1633515082detectcanva.png»,

«title»: «How to detect the operating system in React and Render accordingly»,

«slug»: «blog/first-post»,

«excerpt»: «Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.»,

«body»: «Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.»

},

{

«id»: 2,

«title»: «Learn all about the JavaScript reduce method»,

«cover»: «https: //uploads.sitepoint.com/wp-content/uploads/2021/10/1633515150jsreduce.png»,

«slug»: «blog/second-post»,

«excerpt»: «Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.»,

«body»: «Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.»

},

{

«id»: 3,

«title»: «Understanding React props»,

«cover»: «https: //uploads.sitepoint.com/wp-content/uploads/2021/10/1633515109react-props-2.png»,

«slug»: «blog/third-post»,

«excerpt»: «Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.»,

«body»: «Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.»

}

]

Массив JSON содержит сообщения блога, которые мы будем отображать на странице нашего блога. Обычно такие данные следует получать из API, а не хранить в объекте JSON.

Затем импортируйте и используйте его в разметке, например:

// next-portfolio/pages/blog/index.js

import Posts from '.../posts.json’

import Link from 'next/link’

export default function Blogs () {

return (

 

Read Post

 

 

 

) }

) }

 

 

 

 

)

}

Чтобы страница выглядела лучше, вот несколько стилей:

// next-portfolio/styles/globals.css

/* BLOG PAGE */

.posts {

display: grid;

grid-template-columns: repeat (2, 1fr) ;

gap: 50px;

max-width: 1200px;

margin: 0 auto;

}

.post-container {

margin: 15px auto;

max-width: 900px;

}

.post-container img {

width: 100%;

}

.post img {

height: 300px;

width: 500px;

}

.posts a {

background-color: black;

color: #D7E5f0;

padding: 10px 10px;

cursor: pointer;

margin: 30px 0;

border-radius: 6px;

}

.post {

background-color: white;

margin: 30px 0;

padding: 30px 30px;

border-radius: 6px;

}

Теперь перейдите по адресу http: //localhost:3000/blog в веб-браузере.

Страница блога

Отображение отдельного поста и вложенных комментариев

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

создание страницы для одного поста в блоге

создание динамического вложенного маршрута для показа комментариев

Для этого зайдите pages/blogи создайте новую папку с именем [blog]. Внутри папки создайте два файла: [index].js и [comments].js.

my-site

└── pages

├── index.js // index route (will be rendered at my-site.com)

└── blog

├── index.js // list of blog post (my-site.com/blog)

└── [blog]

├── [index].js // (eg: my-site.com/blog/first-post)

├── [comments].js // (eg: my-site.com/blog/first-post/comments)

Перейдите к [index].js и введите следующий код:

import {useRouter} from 'next/router’

import Link from 'next/link’

import Posts from '.../... /posts.json’

export default function Blog () {

const router = useRouter () ;

const {blog} = router.query;

const fullPath = blog+«/comments»;

if (blog === «first-post») {

return (

 

Read all comments for this article

 

 

 

 

 

 

 

)

} else if (blog === «second-post») {

return (

 

Read all comments for this article

 

 

 

 

 

 

 

)

} else {

return (

 

Read all comments for this article

 

 

 

 

 

 

 

) }

}

Обратите внимание, что в реальном проекте вам не понадобится ifусловный оператор для рендеринга на основе файла post: id. Это потому, что обычно все сообщения хранятся в базе данных. Затем вы будете запрашивать у API только ту публикацию, которая соответствует идентификатору запроса.

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

import Link from 'next/link’

export default function Blog ({post}) {

return (

 

Read all comments for this article

 

 

 

 

 

 

 

) }

}

export async const getStaticProps = ({ params }) => {

const res = await fetch (`https: //your-api.com/posts/${params.title}`) ;

const post = await res.json () ;

return {

props: { post },

};

}

Обратите внимание, как мы устранили необходимость в useRouter (). Это связано с тем, что getStaticProps () автоматически берется идентификатор запроса из paramобъекта, который является частью объекта контекста. Затем объект сообщения, соответствующий этому заголовку, извлекается из API и передается как propsкомпонент Blog.

Теперь, когда мы установили правильный способ получения внешних данных, пришло время посмотреть, как будет выглядеть отдельная страница сообщения: http: //localhost:3000/blog/first-post.

Первая запись в блоге

Вложенный маршрут из комментариев

Вы все еще помните [comments].jsфайл, который мы создали ранее? Next.js будет рассматривать эту страницу как вложенную страницу:

//next-portfolio/pages/blog/[blog]/[comments].js

import {useRouter} from 'next/router’

export default function Comments () {

const router = useRouter () ;

const {blog} = router.query;

return (

 

 

)

}

Это то, что вы обычно делаете в реальном проекте:

export default function Comments ({comments}) {

return (

 

 

)

}

export async const getStaticProps = ({ params }) => {

const res = await fetch (`https: //jsonplaceholder.typicode.com/blog-comments/${params.title}`) ;

const comments = await res.json () ;

return {

props: { comments },

};

}

Комментарии к первому сообщению

Подведение итогов

Маршрутизация страниц в Next.js — одна из самых важных концепций, о которых нужно знать в Next. Это также самая мощная функция, потому что вы можете структурировать свой веб-сайт так, как хотите, и передавать данные между маршрутами путем их вложения.

В этом руководстве мы многое узнали о реализации маршрутизации страниц в Next.js, создав простой веб-сайт портфолио. Я надеюсь, что вы нашли это полезным. Если у вас есть какие-либо отзывы, напишите мне в Твиттере.