Nextjs 生产构建问题（链接不起作用）答案

【问题标题】：Nextjs production build problem (Links do not work)Nextjs 生产构建问题（链接不起作用）
【发布时间】：2020-04-01 07:10:30
【问题描述】：

我在 next.js 和 expressjs 中建立了一个网站，它在开发中运行良好。但是当我运行 next build 时，我得到了开发中不会发生的事情。

我想写一些仅在生产中发生的点。

一些链接不起作用

<li style={{marginLeft: '-50px'}}>
     <Link href={`/profile/?user_slug=${router.query.user_slug}`} as={`/profile/${router.query.user_slug}`}>
        <a className={`${classes.textSize} ${router.route === "/profile/user_slug" ? classes.active1 : ''}`}>User</a>
     </Link>
</li>
<li>
      <Link  href={`/profile/?user_slug=${router.query.user_slug}/questions`} as={`/profile/${router.query.user_slug}/questions`}>
        <a className={`${classes.textSize} ${router.route === "/profile/user_slug/questions" ? classes.active1 : ''}`}>Ques</a>
      </Link>
</li>

当我在某些页面上时，导航栏中的一些链接不起作用。我有路线https://example.com/profile/user_name。这里 user_name 是动态的。我注意到当我在个人资料页面上时，如果我尝试访问主页或问题路线，这不起作用。

在布局中我有

{!mobile && <Button className={classes.button}><Link href='/'><a className={classes.link}>Home</a></Link></Button>}
{!mobile && <Button className={classes.button}><Link href='/questions'><a className={classes.link}>Questions</a></Link></Button>}

这两个简单的链接不起作用。不知道为什么

我在控制台中显示 404 错误，例如

https://example.com/_next/static/u46GEnW5PnfCBXwLuWy-M/pages/category/%5Bcategory_name%5D.jsnet::ERR_ABORTED 404（未找到）

https://example.com/_next/static/u46GEnW5PnfCBXwLuWy-M/pages/question.jsnet::ERR_ABORTED 404（未找到）

我已经在 express 中定义了所有的路由

  app.get('/profile/:user_slug', (req, res) => {
    return nextApp.render(req, res, '/profile/user_slug', { user_slug: req.params.user_slug })
  })

  app.get('/profile/:user_slug/questions', (req, res) => {
    return nextApp.render(req, res, '/profile/user_slug/questions', { user_slug: req.params.user_slug })
  })

  app.get('/profile/:user_slug/followers', (req, res) => {
    return nextApp.render(req, res, '/profile/user_slug/followers', { user_slug: req.params.user_slug })
  })

  app.get('/profile/:user_slug/followings', (req, res) => {
    return nextApp.render(req, res, '/profile/user_slug/followings', { user_slug: req.params.user_slug })
  })

如何在生产中解决它。一切都在开发中运行良好。

【问题讨论】：

标签： reactjs express next.js

【解决方案1】：

让我们看看这篇文章：solving-next-static-pages-js-404-not-found

next.config.js

module.exports = {
  ...
  distDir: "_next",
  generateBuildId: async () => {
    if (process.env.BUILD_ID) {
      return process.env.BUILD_ID;
    } else {
      return `${new Date().getTime()}`;
    }
  },
  ...
}

如果以上内容对您没有帮助。请仔细检查生产服务器上正在运行的实例。 Maybe 运行多个具有不同捆绑包的应用程序实例，并且您需要竞争资源。

【讨论】：