Upgrading to Version 9
version 9 にアップグレードするには、次のコマンドを実行してください：
npm i next@9
yarn add next@9
pnpm up next@9
bun add next@9
Good to know: TypeScript を使用している場合は、
@types/reactと@types/react-domも対応するバージョンにアップグレードすることを確認してください。
Production Deployment on Vercel
もし以前に routes を vercel.json ファイルで設定して dynamic routes を使用していた場合、これらのルールは Next.js 9 の新しいDynamic ルーティング機能を利用するときに削除できます。
Next.js 9 の dynamic routes は、Vercel で自動的に設定され、vercel.jsonのカスタマイズを require する必要はありません。
ここでDynamic ルーティングについての詳細を読むことができます。
Check your Custom App File (pages/_app.js)
以前にCustom <App>の例をコピーした場合、getInitialPropsを削除することができるかもしれません。
getInitialPropsをpages/_app.jsから削除すること(可能な場合)は、新しい Next.js の機能を活用するために重要です！
次の getInitialProps は何も行わず、削除しても問題ありません：
class MyApp extends App {
// Remove me, I do nothing!
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
// ... etc
}
}
Breaking Changes
@zeit/next-typescriptはもう必要ありません
Next.js は今後、@zeit/next-typescriptの使用を無視し、それを削除するように警告します。next.config.jsからこの plugin を削除してください。
あなたのカスタム .babelrc から @zeit/next-typescript/babel への参照を削除します(存在する場合)。
あなたのnext.config.jsからfork-ts-checker-webpack-plugin の使用も削除するべきです。
TypeScript の定義はnextパッケージで公開されているため、競合すると困るので@types/nextをアンインストールする必要があります。
次の type は異なります：
このリストは、コミュニティによって作成され、あなたがアップグレードするのを助けるためのものです。他の違いを見つけた場合は、他のユーザーを助けるために、このリストに pull-request を送信してください。
From:
import { NextContext } from "next";
import { NextAppContext, DefaultAppIProps } from "next/app";
import { NextDocumentContext, DefaultDocumentIProps } from "next/document";
to
import { NextPageContext } from "next";
import { AppContext, AppInitialProps } from "next/app";
import { DocumentContext, DocumentInitialProps } from "next/document";
configキーは現在、ページ上の export になりました
あなたはもはやカスタムの variable である configをページから export できなくなりました(つまり、export { config } / export const config ...)。このエクスポートされた variable は、今では Opt-in AMP や API Route などのページレベルの Next.js の設定を指定するために使用されています。
あなたは、Next.js に特化していないconfigの export を別のものに名前を変更する必要があります。
next/dynamicは、 default で " loading ..." と表示することがなくなりました
Dynamic コンポーネントは、 loading している間、 default では何も render しません。ただし、loadingプロパティを設定することで、この動作をカスタマイズすることができます：
import dynamic from "next/dynamic";
const DynamicComponentWithCustomLoading = dynamic(
() => import("../components/hello2"),
{
loading: () => <p>Loading</p>,
}
);
withAmpは、export された設定 object を優先して削除されました
Next.js は現在、ページレベルの設定の概念を持つようになったので、一貫性のためにwithAmpの上位 component が削除されました。
この変更は、あなたの Next.js プロジェクトの root で以下のコマンドを実行することにより自動的に移行することができます：
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 が生成する内容を表示するには、以下を参照してください：
Before
import { withAmp } from 'next/amp'
function Home() {
return <h1>My AMP Page</h1>
}
export default withAmp(Home)
// or
export default withAmp(Home, { hybrid: true })
After
export default function Home() {
return <h1>My AMP Page</h1>;
}
export const config = {
amp: true,
// or
amp: "hybrid",
};
next exportはもうページをindex.htmlとして export しません
以前は、pages/about.jsを export するとout/about/index.htmlが生成されました。この挙動は変更され、out/about.htmlが生成されるようになりました。
以下の内容でnext.config.jsを作成することで、以前の動作に戻すことができます：
module.exports = {
trailingSlash: true,
}
pages/api/は異なる方法で扱われます
pages/api/内のページは現在、API Routes と見なされています。このディレクトリ内のページには、クライアントサイドのバンドルが含まれなくなりました。
Deprecated Features
next/dynamicは、一度に複数の modules を““ loading することを非推奨としています
next/dynamicでは、React の実装(React.lazyおよびSuspense)に近づけるため、複数の modules を一度にロードする機能が非推奨となりました。
この振る舞いに依存する code の更新は比較的簡単です！ あなたのアプリケーションの移行を助けるために、前後の例を提供しました：
Before
import dynamic from "next/dynamic";
const HelloBundle = dynamic({
modules: () => {
const components = {
Hello1: () => import("../components/hello1").then((m) => m.default),
Hello2: () => import("../components/hello2").then((m) => m.default),
};
return components;
},
render: (props, { Hello1, Hello2 }) => (
<div>
<h1>{props.title}</h1>
<Hello1 />
<Hello2 />
</div>
),
});
function DynamicBundle() {
return <HelloBundle title="Dynamic Bundle" />;
}
export default DynamicBundle;
After
import dynamic from "next/dynamic";
const Hello1 = dynamic(() => import("../components/hello1"));
const Hello2 = dynamic(() => import("../components/hello2"));
function HelloBundle({ title }) {
return (
<div>
<h1>{title}</h1>
<Hello1 />
<Hello2 />
</div>
);
}
function DynamicBundle() {
return <HelloBundle title="Dynamic Bundle" />;
}
export default DynamicBundle;