Question

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

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

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

我知道这基本上可以通过在链接中传递查询来完成，并使其挂钩路径名，尽管市场营销人员已指示我这就是他们想要链接的方式。

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

这可能要问的太多了，如果我还有其他方法可以解决这个问题，将对指导信息表示高度赞赏。

Answer 1

我能想到的解决方案是添加一个custom server，在其中解析诸如/pathname/some-sub-information之类的路径，并将其转换为页面以呈现pathname和一些附加参数some-sub-information < / p>

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-此处将生成following page

希望这对您有帮助！

NextJS：指定通用渲染模板

1 个答案: