0.4.x to 0.5.x

Upgrade soya-next to 0.5.x and next to 5.x.x
```
yarn add soya-next next@5
```
Add soya-next-server to start server in production environment
```
yarn add soya-next-server
```

Move soya-next-scripts to devDependencies and upgrade it to 0.5.x

yarn remove soya-next-scripts
yarn add --dev soya-next-scripts

Remove styled-modules dependency from package.json and .babelrc

yarn remove styled-modules

{
  ...
  "plugins": [
    ...
-   "styled-modules/babel"
    ...
  ]
}

Update scripts in package.json:

{
  ...
  "scripts": {
-   "analyze": "ANALYZE=1 soya-next-scripts build",
+   "analyze": "BUNDLE_ANALYZE=both soya-next-scripts build",
+   "analyze:browser": "BUNDLE_ANALYZE=browser soya-next-scripts build",
+   "analyze:server": "BUNDLE_ANALYZE=server soya-next-scripts build",
-   "start": "soya-next-scripts start",
+   "dev": "soya-next-scripts dev",
+   "start": "soya-next-server",
  }
  ...
}

If you have custom document (pages/_document.js), include /_next/static/style.css into <head>:

import Document, { Head, Main, NextScript } from "next/document";
import config from "config";
import htmlescape from "htmlescape";

const __NEXT_CONFIG__ = { ...config };
// exclude legacy and server config
delete __NEXT_CONFIG__.legacy;
delete __NEXT_CONFIG__.server;

export default class extends Document {
  render() {
    const { __NEXT_DATA__ } = this.props;
    return (
      <html>
        <Head>
          <link
            rel="stylesheet"
            href={`${__NEXT_DATA__.assetPrefix}/_next/static/style.css`}
          />
        </Head>
        <body>
          <Main />
          <script
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{
              __html: `__NEXT_CONFIG__ = ${htmlescape(__NEXT_CONFIG__)}`
            }}
          />
          <NextScript />
        </body>
      </html>
    );
  }
}

PreviousMigration Guide NextAPI Reference

Last updated 7 years ago