Нужна помощь по поводу динамического URL nextjs

Question

У меня проблема с тем, что всякий раз, когда я пытаюсь зайти на страницу localhost:3000/blog/test напрямую, возвращается ошибка 404. Но всякий раз, когда я пытаюсь посетить его, используя <Link> компонент, он работает нормально.

Это мой код <Link href={{ pathname: '/blog', query: {slug: 'test'} }} as="/blog/test"><a className="nav__link">Blog</a></Link>

и у меня есть файл blog.js в моей папке pages.

Answer 1

Вам придется использовать now.json для настройки ваших маршрутов. Также важно отметить, что именно сейчас строится маршрут, поэтому посещение его на стороне клиента не будет работать, если вы используете localhost. Создайте свой проект сейчас, и он должен работать.

Также параметром "as" будет as={{ pathname: / user / manage / $ {variable} }}

Answer 2

Происходит следующее: на клиенте с компонентом Link вы создаете ссылку на страницу blog.js, устанавливая в качестве имени пути "/blog".

Когда вы переходите непосредственно кURL /blog/test, Next.js попытается отобразить страницу на сервере и для этого ищет файл /pages/blog/test.js.Этот файл не существует, и Next.js не знает, что вы хотите загрузить страницу blog.js и установить query.slug для второй части URL.

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

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

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

server.get('/blog/:slug', (req, res) => {
  const actualPage = '/blog'
  const queryParams = { slug: req.params.slug }
  app.render(req, res, actualPage, queryParams)
})