Soya Next
Search…
⌃K
Links

0.4.x to 0.5.x

  • Upgrade soya-next to 0.5.x and next to 5.x.x
    yarn add soya-next [email protected]
  • 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>
    );
    }
    }