添加url slug to Next Js routing getting TypeError path should be type string getting type object

Question

我想在我的 next.js 应用程序中为博客 post 添加一个 :id slug 到 url。如果我只是按照 link 从应用程序到页面，它会起作用，但如果我在 post 上刷新页面或直接访问页面，我会不断收到以下错误：

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type object
    at assertPath (path.js:39:11)
    at extname (path.js:835:5)
    at new View (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\view.js:56:14)
    at Function.render (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\application.js:570:12)
    at app.get (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\server.js:31:16)
    at Layer.handle [as handle_request] (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\layer.js:95:5)
    at next (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\layer.js:95:5)
    at E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:281:22
    at param (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:354:14)
    at param (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:365:14)
    at Function.process_params (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:410:3)
    at next (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:275:10)
    at jsonParser (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\body-parser\lib\types\json.js:110:7)
    at Layer.handle [as handle_request] (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:317:13)
    at E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:335:12)
    at next (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\index.js:275:10)
    at expressInit (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\middleware\init.js:40:5)
    at Layer.handle [as handle_request] (E:\Web Pages\React Apps\Full Stack\Nextjs-Blog\node_modules\express\lib\router\layer.js:95:5)

我已阅读文档 Next Js Docs With Link 并完全按照说明进行操作。

这是我的代码：

server.js

nextApp.prepare().then(() => {
  const app = express();
  app.use(express.json());

  app.get('/post/:id', (req, res) => {
    return app.render(req, res, '/post', { id: req.params.id });
  });

  app.get('*', (req, res) => {
    return handle(req, res);
  });

  app.listen(PORT, err => {
    if (err) throw err;
    console.log(`ready at http://localhost:${PORT}`);
  });
});

Link到页面

<Link as={`/post/${post._id}`} href={`/post?id=${post._id}`}>
  <a>Link text</a>
</Link>

根据文档，应该这样写。我不确定我错过了哪些步骤，或者 webpack 是否存在问题或其他问题。如果您需要更多信息，请告诉我任何帮助。

Answer 1

这里的目标不是让 express 应用呈现，而是将请求传递给 NextJS。

将渲染更改为：

app.get('/post/:id', (req, res) => {
    return nextApp.render(req, res, '/post', { id: req.params.id });
});

Example

添加url slug to Next Js routing getting TypeError path should be type string getting type object

Adding url slug to Next Js routing getting TypeError path should be type string getting type object

javascript

node.js

express

reactjs

next.js