Далее. js dynamici c route - 404 при перезагрузке страницы после добавления SLUG

Question

Я использую Next. js и Node.js для моего проекта.

Что имеем: Структура страниц:

pages / products / PageSomeName. js

pages / products / PageEnotherName. js

pages /products/PageName.js

Имя страницы в папке products может быть разным

маршруты. js

routes.add("/products/:id", "/products/[id].js");

сервер. js

app.prepare().then(() => {
  const server = express();

  server.use(
    "./images",
    express.static(path.join(__dirname, "images"), {
      maxAge: dev ? "0" : "365d"
    })
  );

  server.use(bodyParser.json());

  server.get("*", (req, res) => {
    return handle(req, res);
  });

  const PORT = process.env.PORT || 9001;

  server.listen(PORT, err => {
    if (err) throw err;
    console.log(`> Read on http://${process.env.SITE_URL_FULL}`);
  });
});

Компонент связи

 <Link href={`/products/${data.link}`} as={`/products/${data.slug}`}/>

массив данных

export const storeProducts = [
  {
    id: 1,
    title: "Title1",
    link: "product_name_some",
    slug: "product-1-slug",
  },
  {
    id: 2,
    title: "Title2",
    link: "product_name_different_some_name",
    slug: "product-2-slug"
  },

Возникла проблема, когда я добавил slug для своих ссылок.

На стороне клиента все работает нормально. Я беру localhost: 3000 / product-2-slug в URL браузера. Но после перезагрузки я беру страницу ошибки 404 от Next. js

Что я должен добавить на стороне сервера в сервере. js для нормальной перезагрузки сервера? Возможно, мне нужно изменить компонент Link или настройки следующего маршрута в маршрутах. js

Спасибо!

Answer 1

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

server.get("/products/product1", (req, res) => {
    return handle(req, res);
});

server.get("/products/product2", (req, res) => {
    return handle(req, res);
});

server.get("/products/product3", (req, res) => {
    return handle(req, res);
});

Хороший способ справиться с этим - создать универсальный c products. js внутри каталога pages и на дескрипторе сервера, как показано ниже.

сервер. js

server.get("/products/:id", (req, res) => {
    return handle(req, res, { id: req.params.id });
});

и

страниц / продуктов. js мы можем создать getInitialProps метод

static getInitialProps (context) {
    // parameters reqturned from server are accessible via
    const id = ctx.query.id
}