下一页 JS 导出到静态 HTML 总是在刷新时重定向到主页"/"

Question

我正在使用NextJS和React创建一个博客应用程序。由于本教程，我已经了解了基础知识

所以我尝试实现博客应用程序。当我尝试在开发模式下测试它时yarn dev路由都很好。但是如果我yarn build构建它并导出到静态 HTMLyarn export.当我单击链接时，路由会错过，但是当我刷新浏览器时，它总是将我带回/页面。

为什么会这样？

这是示例代码

标头.js组件

import Link from 'next/link'
const linkStyle = {
marginRight: 15
}
export default function Header() {
return (
<div>
<Link href="/">
<a style={linkStyle}>Home</a>
</Link>
<Link href="/about">
<a style={linkStyle}>About</a>
</Link>
</div>
)
}

我的布局.js组件

import Header from './Header'
const layoutStyle = {
margin: 20,
padding: 20,
border: '1px solid #DDD'
}
export default function Layout(props) {
return (
<div style={layoutStyle}>
<Header />
{props.children}
</div>
)
}

索引.js

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
function getPosts() {
return [
{ id: 'hello-nextjs', title: 'Hello Next.js' },
{ id: 'learn-nextjs', title: 'Learn Next.js is awesome' },
{ id: 'deploy-nextjs', title: 'Deploy apps with ZEIT' }
]
}
const PostLink = ({ post }) => (
<li>
<Link href="/p/[id]" as={`/p/${post.id}`}>
<a>{post.title}</a>
</Link>
<style jsx>{`
li {
list-style: none;
margin: 5px 0;
}
a {
text-decoration: none;
color: blue;
font-family: 'Arial';
}
a:hover {
opacity: 0.6;
}
`}</style>
</li>
)
export default function Blog() {
return (
<Layout>
<h1>My Blog</h1>
<ul>
{getPosts().map(post => (
<PostLink key={post.id} post={post} />
))}
</ul>
</Layout>
)
}

包.json

{
"name": "hello-next",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p $PORT",
"export": "next export"
},
"license": "ISC",
"dependencies": {
"next": "latest",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-markdown": "^4.0.6"
}
}

编辑：我 nextjs.org/learn/basics/deploying-a-nextjs-app 遵循本指南。但我使用"部署到您自己的环境"步骤。所以基本上与此回购的结构相同 github.com/zeit/next-learn-demo/tree/master/8-deploying

Answer 1

我通过将以下内容添加到next.config.js来解决此问题：

module.exports = {
exportTrailingSlash: true,
}

https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

我想这取决于您的网络服务器。