Роутинг в NEXT js?

Question

[Андрей Охотников]

Как настроить NEXT js так чтобы при переходе по роуту /products/category - рендернился компонент-страница catalog.jsx ?

Пробовал на сервере добавить роуты, но это не помогло

server.get('/products/:slug', (req, res) => {
  return app.render(req, res, '/catalog', { slug: req.params.slug });
});

Answer 1

[Aves]

Можно сделать примерно так:

server.js

const {createServer} = require('http');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 4000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const [, category] = req.url.split(/(?<=^\/products\/+)([^\/]+)/);
    if (!category)
      handle(req, res);
    else
      app.render(req, res, '/catalog');
  }).listen(port, err => {
    if (err)
      throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

pages/catalog.js

import React from 'react';

export default class extends React.Component {
  static getInitialProps({asPath}) {
    const [, category] = asPath.split(/(?<=^\/products\/+)([^\/]+)/);
    return {category};
  }

  render() {
    return (
      <div>
        <h1>Catalog</h1>
        <p>{this.props.category}</p>
      </div>
    );
  }
}

И переходить по

<Link href='/catalog' as='/products/some-category'>
  <a>Some category</a>
</Link>

Comments

[Андрей Охотников]

Cпасибо, у меня косяк вышел в том что при переходе по '/products/some-category' - браузер ищет картинку по url /products/static/images/icons/cross.svg вместо /static/images/icons/cross.svg - как это можно исправить?

[Aves]

Андрей Охотников, а какой src у img?

[Андрей Охотников]

Aves, static/images/icons/logo.svg

[Aves]

Андрей Охотников, нужен путь /static/images/icons/logo.svg
от корня в смысле

[Андрей Охотников]

Aves, спасибо!