NextJS：指定通用渲染模板

Question

以下是我尝试使用的链接结构示例：

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

我本质上希望 NextJS 呈现与 /pathname/ 匹配的文件 - 所以 pathname.js。无论 /some-sub-information 是什么，NextJS 都应该渲染 pathname.js 文件，使用 /some-sub-information 作为 API 调用的参数。

我知道这基本上可以通过通过链接传递查询来完成，并让它挂钩路径名，尽管营销部门告诉我这是他们想要的链接。

我不知道如何做到这一点，因为这是我第一次使用 Next 和 SSR。我希望在 Next 中有某种方式来指定它应该在到达 url 的 /pathname 部分时呈现某个文件，然后忽略 url 的其余部分。

这可能问得太多了，如果有任何其他方法可以实现这一点，我将不胜感激。

Answer 1

我能想到的解决方案是添加一个custom server，在其中解析/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

所以页面看起来像这样

pages/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 将导致following page

希望对您有所帮助！