> For the complete documentation index, see [llms.txt](https://traveloka.gitbook.io/soya-next/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://traveloka.gitbook.io/soya-next/migration-guide/0.4.x-to-0.5.x.md).

# 0.4.x to 0.5.x

* Upgrade `soya-next` to `0.5.x` and next to `5.x.x`

  ```bash
  yarn add soya-next next@5
  ```
* Add `soya-next-server` to start server in production environment

  ```bash
  yarn add soya-next-server
  ```
* Move `soya-next-scripts` to `devDependencies` and upgrade it to `0.5.x`

  ```bash
  yarn remove soya-next-scripts
  yarn add --dev soya-next-scripts
  ```
* Remove `styled-modules` dependency from `package.json` and `.babelrc`

  ```bash
  yarn remove styled-modules
  ```

  ```diff
  {
    ...
    "plugins": [
      ...
  -   "styled-modules/babel"
      ...
    ]
  }
  ```
* Update `scripts` in `package.json`:

  ```diff
  {
    ...
    "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>`:

  ```javascript
  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>
      );
    }
  }
  ```