Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

We upgraded from version 5.0.1-canary.17 to version 6.0.0-canary.2. This was to fix a problem with pressing the back button whilst using the Safari browser. This problem was fixed but we created another issue with the stylesheets. The stylesheets were previously being bundled together and served correctly, now they're not.

Current Behavior

We initially had this setup in our _document.js page. However, the 'fs' module errored and we found the latest solution here: #4119

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { readFileSync } from 'fs';

const dev = process.env.NODE_ENV !== 'production';

function getStyles() {
return readFileSync(`${process.cwd()}/src/.next/static/style.css`, {
encoding: 'utf8',
});
}

export default class extends Document {
render() {
return (
<html lang="en">
<Head>
{dev && (
<link
rel="stylesheet"
href={`/_next/static/style.css?v=${Math.random().toString(32)}`}
/>
)}
{!dev && <style dangerouslySetInnerHTML={{ __html: getStyles() }} />}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}

We thus changed to the below noted, and removed the fs module causing that error.

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
const dev = process.env.NODE_ENV !== 'production';

export default class extends Document {
render() {
const { buildManifest } = this.props;
const { css } = buildManifest;
console.log('buildManifest', buildManifest);
console.log('css', css);

return (
<html lang="en">
<Head>
{css.map(file => (
<link rel="stylesheet" href={`/_next/${file}?version=${ Math.random().toString(32)}`} key={file} />
))}
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}

However, we now have a new problem as only some of our styling is being ported over. the log of the css array pulled out of the buildManifest has two CSS paths, we suspect that one is overwriting the other perhaps instead of being bundled together.

css: [ 'static/style.css', 'static/style.css' ],
'main.js': [ 'static/commons/main.js' ],
'bundles/pages/_document.js': [ 'bundles/pages/_document.js' ],
'bundles/pages/_error.js': [ 'bundles/pages/_error.js' ],
'bundles/pages/_app.js': [ 'bundles/pages/_app.js' ],
'manifest.js': [ 'static/commons/manifest.js' ],
'bundles/pages/cm/templates/homepage.js': [ 'bundles/pages/cm/templates/homepage.js' ],
'bundles/pages/cm/templates/news.js': [ 'bundles/pages/cm/templates/news.js' ] }

Steps to Reproduce (for bugs)

To reproduce the issue, I've set up a very simple example at this repo: https://github.com/Rusticman/test-next

Pull in code

run npm install

run npm run dev

available at localhost:3000

There are only two paths; / (root url) & /news. They should have the same styling. homepage styling pulls through initially, but then fails to bundle on subsequent navigation to and from homepage.

If you run npm run build & npm run start the homepage styling never appears.

Context

This issue has stopped us from adopting the latest version of next.

Your Environment

Tech
Version

next
6.0.0-canary.2

node
9.5.0

OS
MacOS Sierra 10.12.6

browser
Google Chrome v65

etc

Issue 2:
Is there a recommended approach for page transitions... to have current page slide out and next page slide in. So something like this: https://github.com/maisano/react-router-transition