NextJS '/' to index.js 什么都不加载

Question

我是 Next.js 的新手我遇到一个问题 http://localhost:3000 在使用客户端路由时不起作用，但在我使用刷新时加载。

我的 Header.js 显示导航的文件

import Link from 'next/link'
const Header = () => (
    <div>
        <Link href='/'>
          <a style={linkStyle}>Home</a>
        </Link>

        <Link href='/about'>
          <a style={linkStyle}>About</a>
        </Link>

        <Link href='/listing'>
            <a style={linkStyle}>Search</a>
        </Link>

    </div>
)

export default Header

然后在 server.js 我几乎有了 Next.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('/listing/:id', (req,res) => {
    const actualPage = '/listing'
    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)
})

我的 /about 和 /listing 页面有效，如果我使用 /nonexistance-url，它将 return 404。但是，我不能在客户端 link 到 /

Answer 1

显然这是 next-css

的错误

const withCSS = require('@zeit/next-css')
module.exports = withCSS({/* my next config */})

这 2 个线程正在讨论这个问题，显然很难修复，以防有人遇到同样的错误。

https://github.com/zeit/next.js/issues/5291

https://spectrum.chat/thread/2183fc55-236d-42cb-92b9-3ab10acc6303

上面post建议的临时解决方案对我有用。

Create a empty css file and import it in your _app.js

NextJS '/' to index.js 什么都不加载

NextJS '/' to index.js loads nothing

node.js

express

reactjs

next.js