I'm adding next.js (7.0.2) to an existing project and can't figure out why the Link module isn't loading pages that have import 'style.css'.
I have followed the @zeit/next-css instructions and also the Next.js/Express integration.
I installed the following packages
- next 7.0.2
- @zeit/next-css
- css-loader@1.0.1
- express (v4)
next.config.js
// ./next.config.js file
const withCSS = require('@zeit/next-css')
module.exports = withCSS()
index.js
// ./pages/index.js file
import Link from 'next/link'
const Index = () => (
<div>
<p>Hello Next.js</p>
<p>
<Link href="/test"><a>test</a></Link>
</p>
</div>
)
export default Index
test.js
// ./pages/test.js file
import "../style.css"
export default () => <div className="example">Hello World!</div>
style.css
// ./style.css file
.example {
font-size: 50px;
}
Expected behavior: The Link module will load pages with CSS just like it would any other page.
Actual behavior: All pages will load EXCEPT the one that has import 'my.css'. I can load that page directly via a url.
EG -
- Works = loading http://localhost:3000/index
- Works = loading http://localhost:3000/test (and css is applied)
- Does NOT work = Load http://localhost:3000/index and click the test link. Nothing happens. If I go to the Network tab on the Developer Tools (Chrome) I see test.js listed and the initiator is page-loader.js. This seems to be followed by a series of on-demand-entries-ping?page=/ but not sure what it means.
Update: If I comment out the import "../style.css" the file loads (without CSS). So it seems there is something in the css processing with server side routing that isn't right with my setup.
@Darryl - here are the relevant snippets from my express initialization file. The entire file can be found (current iteration) at https://github.com/tagyoureit/nodejs-poolController/blob/6.0-DEV/src/lib/comms/server.js#L33.
function startServerAsync(type) {
...
const _next = require('next')
const dev = process.env.NODE_ENV !== 'production'
...
// servers is an object that holds http/https/socketio/mdns and other servers
// type='http' in current testing
servers[type].next = _next({ dev })
servers[type].next.prepare()
.then(() => {
servers[type].app = express();
servers[type].server =
container.http.createServer(servers[type].app);
configExpressServer(servers[type].app, express, servers[type].next);
servers[type].server = servers[type].server.listen(servers[type].port, function () {
container.logger.verbose('Express Server ' + type + ' listening at port %d', servers[type].port);
container.io.init(servers[type].server, type)
resolve('Server ' + type + ' started.');
});
}
// assign static/api routes
function configExpressServer(app, express, _next) {
// use next as router
const handle = _next.getRequestHandler()
// many app.get / app.use statements
...
// catch all to route through next
app.get('*', (req, res) => {
const { parse } = require('url')
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
handle(req, res, parsedUrl)
})
}
