Question

我正在学习如何使用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"
  }
}

next.js重新加载索引给出＆＃34;意外错误＆＃34;一旦部署

0 个答案: