アップグレードガイド

バージョン 8 から 9.0.x へのアップグレード

前置き

Vercel へのプロダクションデプロイ

動的なルーティングのために、 now.json ファイル内に routes を設定していた場合、Next.js 9 の新しい動的なルーティング機能を利用することで、これらのルールを削除できます。

Next.js 9 の動的なルーティングは Now 上では自動的に設定されているため、 now.json のカスタマイズは必要ありません。

詳細はこちらの動的なルーティングを読んでください。

自分のカスタム (`pages/_app.js`) のチェック

カスタム <App> の例をコピーしていたなら、getInitialProps を削除できます。

pages/_app.js から getInitialProps の削除(可能であれば)は、新しい Next.js の機能を利用するために重要です！

以下の getInitialProps は何もしないため削除して構いません:

class MyApp extends App {
  // 削除して下さい、何もしません!
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    // ... などなど
  }
}

破壊的な変更

`@zeit/next-typescript` はもはや必要ではありません

Next.js は @zeit/next-typescript の使用を無視するようになり、削除するよう警告されます。next.config.js からこのプラグインを削除して下さい。

カスタム .babelrc から @zeit/next-typescript/babel への参照を削除して下さい（存在する場合）。

fork-ts-checker-webpack-plugin の使用も next.config.js から削除されるべきです。

Typescript の定義は next パッケージと共に配布されるため、衝突する @types/next をアンインストールする必要があります。

以下の型は異なります:

このリストはアップグレードの助けになるようコミュニティで作成されました。もし他の違いを発見した場合は、他のユーザーの助けになるようにこのリストに対してプルリクエストを送って下さい。

変更前:

import { NextContext } from 'next';
import { NextAppContext, DefaultAppIProps } from 'next/app';
import { NextDocumentContext, DefaultDocumentIProps } from 'next/document';

変更後:

import { NextPageContext } from 'next';
import { AppContext, AppInitialProps } from 'next/app';
import { DocumentContext, DocumentInitialProps } from 'next/document';

`config` キーはページ上で特殊なエクスポートになります

ページから config という名前のカスタム変数(つまり export { config } / export const config ...) をエクスポートする必要はありません。このエクスポート変数はオプトイン AMP や API ルーティング機能のようにページレベルの Next.js 設定を指定するために使われます。

Next.js ではない目的の config エクスポートは別の名前に変更しなければなりません。

もはや `next/dynamic` はデフォルトでロード時に "loading..." を表示しません

動的コンポーネントはデフォルトではロード時に何も表示しません。その場合でも、 loading プロパティを設定することでこの挙動をカスタマイズできます:

import dynamic from 'next/dynamic';

const DynamicComponentWithCustomLoading = dynamic(() => import('../components/hello2'), {
  loading: () => <p>Loading</p>
});

`withAmp` は削除され、エクスポートされた設定オブジェクトに置き換えられました

Next.js はページレベルの設定という概念を持つようになり、整合性を保つため withAmp 高階コンポーネントは削除されました。

この変更は Next.js プロジェクトのルートディレクトリで以下のコマンドを実行することで自動的に移行されます:

curl -L https://github.com/vercel/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js

この移行を手動で行う、あるいは codemod が生成する内容を見るためには、以下をご覧下さい:

移行前

import { withAmp } from 'next/amp';

function Home() {
  return <h1>My AMP Page</h1>;
}

export default withAmp(Home);
// または
export default withAmp(Home, { hybrid: true });

移行後

export default function Home() {
  return <h1>My AMP Page</h1>;
}

export const config = {
  amp: true,
  // または
  amp: 'hybrid'
};

`next export` はもはや `index.html` としてエクスポートされません

以前は、 pages/about.js のエクスポートにより out/about/index.html が出力されていました。この挙動は out/about.html を出力するように変更されました。

以下の内容で next.config.js を作成することで、以前の挙動に戻すことができます:

// next.config.js
module.exports = {
  exportTrailingSlash: true
};