NextJS：指定通用渲染模板

Question

下面是我尝试使用的 link 结构的示例：

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

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

我知道这基本上可以通过 link 传递查询来完成，并让它与路径名挂钩，尽管营销人员告诉我这就是他们想要 link 的方式s.

我有点不知如何去做，因为这是我第一次使用 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

希望对您有所帮助！

NextJS：指定通用渲染模板

NextJS: Specify Common Rendering Template

routing

reactjs

server-side-rendering

next.js