Несогласованные stati c ссылки с Next. js SSG - PullRequest
Новая
       70

Несогласованные stati c ссылки с Next. js SSG

0 голосов
/ 27 мая 2020

Я создал веб-сайт Next. js с простой структурой: 

- pages
  - articles
    - [slug].js
    - index.js

- components
  - nav.js

В nav. js, я перенаправляю все ссылки как next/link, так и pages/articles/[slug].js и pages/articles/index.js <- последняя представляет собой своего рода «архивную» страницу для просмотра всех статей. </p>

Однако я не могу заставить Link правильно указывать на domain/articles/ и иметь сгенерированные ссылки в этом список работает правильно.

С каждым <Link /> я использую метод <Link href="/articles/[id].js" as={ / article / $ {id} }>, который работает в разработке, но как только я экспортирую в stati c сайт, проблем предостаточно.

Во-первых, установка статической c ссылки вообще не работает:

<Link href="/articles/index.js" as={`/articles/${id}`}> приводит к ссылке, указывающей на domain/articles, что дает мне индекс файлов в сгенерированной папке articles/. Если я вручную добавлю .html в конец, то получу страницу. Однако та же ссылка в сгенерированной ссылке на страницу articles/[id] указывает на domain/articles/articles

Я думаю, что я что-то делаю не так, но я не могу, хоть убей, понять, как я Предполагается использовать компонент <Link /> для создания согласованных и функциональных c ссылок между страницами.

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Прежде всего, атрибут href не должен иметь файлового суффикса .js.

Правильные hrefs для ваших файлов примеров: href="/article" и href="/article/[slug]"

Во-вторых, ваш атрибут as должен совпадать с href, поэтому вы не можете , например, 

<Link href="/articles/index" as={`/articles/${id}`}>

, поскольку "index" не совпадает со строкой идентификатора.

Итак, правильные теги: 

<Link href="/articles">

(Не нужно as, поскольку он такой же, как href) 

<Link href="/articles/[slug]" as={`/articles/${id}`}>

Он должен работать лучше для вас, как только вы исправите эти вещи.

0 голосов
/ 04 июня 2020

Оказывается, проблемы возникли из-за причуды Next. js развертывание: оно НЕ поддерживает размещение сайта во вложенных папках. Таким образом, example.com/myNextSite/ будет делать странные вещи со ссылками, в то время как тот же экспортированный сайт отлично работает в root example.com.

...