`url`は非推奨です

このエラーが発生した理由

バージョン 6.x より前では、`url` プロパティはすべての `Page` コンポーネント（`pages` ディレクトリ内のすべてのページ）に自動的に注入されていました。

これは、物事を非常に予測可能で明確にしたいという理由から廃止されます。どこからともなく現れる魔法のような `url` プロパティは、その目標には役立ちません。

注意: ⚠️ React Dev Tools を使用している場合、コードで `url` を参照していなくても、この警告がトリガーされることがあります。拡張機能を一時的に無効にして、警告が継続するかどうかを確認してください。

修正方法

Next 5 以降、Next.js ルーターオブジェクトをページおよびすべての下位コンポーネントに明示的に注入する方法を提供しています。注入される `router` プロパティは、`pathname`、`asPath`、`query` のような `url` と同じ値を保持します。

`withRouter` の使用例を以下に示します。

import { withRouter } from 'next/router'
 
class Page extends React.Component {
  render() {
    const { router } = this.props
    console.log(router)
    return <div>{router.pathname}</div>
  }
}
 
export default withRouter(Page)

`url` プロパティの使用を `withRouter` に自動的に変更するための codemod（コードからコードへの変換）を提供しています。

この codemod と実行方法については、こちらをご覧ください: `withRouter` を使用する