NextJS: укажите общий шаблон рендеринга - PullRequest
Новая
       21

NextJS: укажите общий шаблон рендеринга

0 голосов
/ 17 ноября 2018

Ниже приведен пример структуры ссылок, с которой я пытаюсь работать:

www.baseurl.com/pathname/some-sub-information

Я хочу, чтобы NextJS отображал файл, соответствующий /pathname/ - поэтому pathname.js.Независимо от того, какой / некоторой под-информацией может быть, NextJS должен отобразить файл pathname.js, используя /some-sub-information в качестве параметров для вызова API.

Я знаю, что это можно сделать, передав запросы черезссылку, и пусть она перехватит путь, хотя я и получил от маркетинга указание, что именно так они и хотят ссылки.

Я немного растерялся, как это сделать, так как этовпервые работаю с Next и SSR в целом.Я надеюсь, что в Next есть что-то, чтобы указать, что он должен отображать определенный файл, когда он достигает части /pathname url, а затем просто игнорировать остальную часть url.

Это может быть слишкоммного просить, ошибка, если есть какой-то другой способ, которым я мог бы достичь этого, руководящая информация будет высоко оценена.

1 Ответ

0 голосов
/ 17 ноября 2018

Решение, которое я могу придумать, - это добавить пользовательский сервер , где вы анализируете путь, например /pathname/some-sub-information, и преобразуете его в страницу для отображения pathname и некоторого дополнительного параметра some-sub-information

.

server.js 

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

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);

    const { pathname, query } = parsedUrl; // pathname = '/pathname/some-sub-information'
    const parts = pathname.split('/');
    const page = parts[1]; // 'pathname'
    const param = parts[2]; // 'some-sub-information'

    if (page) {
      const queryParams = { ...query, pageParam: param };
      app.render(req, res, '/' + page, queryParams);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, err => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

Параметры, передаваемые с сервера на клиент app.render(req, res, '/' + page, { pageParam: 'test' });, доступны в параметрах getInitialProps query, например. query.pageParam

Так что страница будет выглядеть примерно так

страниц / index.js 

function Index({ pageParam }) {
  return (
    <div>
      INDEX component with {pageParam}
    </div>
  );
}

Index.getInitialProps = async ({ query }) => {
  const { pageParam } = query;
  return { pageParam };
};

export default Index;

Имея этот пользовательский сервер и pages/index.js (node server.js), перейдите по адресу / index / some-data-here, и вы увидите следующую страницу

Надеюсь, это поможет вам!

...