我正在学习如何使用next.js并遵循指南。我完成了第一部分,最终让你使用zeit / now和一个快速后端来部署一个非常简单的应用程序。在我的本地开发服务器和本地构建它工作正常,我可以正常浏览所有页面。当我现在部署它时,我的网站工作正常,除了使用后退按钮导航或第二次到索引页面将导致意外错误。每个其他页面加载正常,即使返回。我不能为我的生活找出原因。
这是网站,例如:https://test2-mtxtgaubzh.now.sh/
index.js
import Layout from '../components/MyLayout'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'
const ShowLink = ({ show }) => (
<li key={show.id}>
<Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
<a>{show.name}</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>
)
const Index = (props) => (
<Layout>
<h1>Terrace House Shows</h1>
<ul>
{props.shows.map(({show}) => (
<ShowLink key={show.id} show={show}/>
))}
</ul>
<style jsx>{`
h1, a {
font-family: "Arial";
}
ul {
padding: 0;
}
li {
list-style: none;
margin: 5px 0;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
opacity: 0.6;
}
`}</style>
</Layout>
)
Index.getInitialProps = async function() {
const res = await fetch('http://api.tvmaze.com/search/shows?q=\%22Terrance%20House\%22"');
const data = await res.json()
return {
shows: data
}
}
export default Index
header.js (where the routing comes from)
import Link from 'next/link'
const linkStyle = {
marginRight: 15
}
const Header = () => (
<div>
<Link href="/">
<a style={linkStyle}>Home</a>
</Link>
<Link href="/about">
<a style={linkStyle}>About</a>
</Link>
</div>
)
export default Header
server.js
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
const server = express()
server.get('/p/:id', (req, res) => {
const actualPage = '/post'
const queryParams = { id: req.params.id }
app.render(req, res, actualPage, queryParams)
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch((ex) => {
console.error(ex.stack)
process.exit(1)
})
package.json
{
"name": "hello-next",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"isomorphic-unfetch": "^2.0.0",
"next": "^4.2.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}