🚀

【Next.js和訳】Migrating to Next.js/Migrating from React Router

2021/10/02に公開約4,300字

この記事について

この記事は、Migrating to Next.js/Migrating from React Routerの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Migrating from React Router

このガイドは、Next.js で React Router から ファイルシステムベース のルートに移行する方法を理解するのに役立ちます。next/linknext/routerを使用することで、以下のことが可能になります。

  • React Router を依存関係から外すことで、バンドルのサイズを小さくする。
  • ファイルシステムを介してアプリケーションのルートを定義する。
  • Next.js フレームワークの最新の改良点を利用する。

基本

まず、React Router をアンインストールします。Next.js でビルトインのルーティングに移行することになります。

npm uninstall react-router-dom

クライアントサイドでルートの遷移を行うためのLinkコンポーネントは、React Router とは若干異なります。

// ビフォー (React Router)
import { Link } from 'react-router-dom'
export default function App() {
  return <Link to="/about">About</Link>
}
// アフター (Next.js)
import Link from 'next/link'
export default function App() {
  return (
    <Link href="/about">
      <a>About</a>
    </Link>
  )
}

React Router を使用するほとんどの React アプリケーションは、ルートのリストを含むトップレベルのナビゲーションファイルを持っています。たとえば、以下のようになります。

import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <h1>About</h1>
        </Route>
        <Route path="/blog">
          <h1>Blog</h1>
        </Route>
        <Route path="/">
          <h1>Home</h1>
        </Route>
      </Switch>
    </Router>
  )
}

Next.js では、同じアプリケーション構造をファイルシステムでも表現することができます。ファイルがpagesディレクトリに追加されると、自動的にルートとして利用できるようになります。

  • pages/about.js/about です。
  • pages/blog.js/blog のようになります。
  • pages/index.js/

Nested Routes

以下の例では、/blog/my-post のようなルートは Post コンポーネントをレンダリングします。スラッグが指定されていない場合は、すべてのブログ記事のリストをレンダリングします。

import { BrowserRouter as Router, Switch, Route, useRouteMatch, useParams } from "react-router-dom"
export default function Blog() {
  // /blog のしたのNested route
  const match = useRouteMatch()
  return (
    <Router>
      <Switch>
        <Route path={`${match.path}/:slug`}>
          <Post />
        </Route>
        <Route path={match.path}>
          <h1>All Blog Posts</h1>
        </Route>
      </Switch>
    </Router>
  )
}
function Post() {
  const { slug } = useParams()
  return <h1>Post Slug: {slug}</h1>
}

Next.js では、Routeコンポーネント内で:slug構文を使用するのではなく、Dynamic Routesのファイル名に[slug]構文を使用しています。これを Next.js に変換するには、pages/blog/index.js(すべてのページを表示)とpages/blog/[slug].js(個々の記事を表示)の 2 つのファイルを新たに作成します。

pages/blog/index.js
export default function Blog() {
  return <h1>All Blog Posts</h1>
}
pages/blog/[slug].js
import { useRouter } from 'next/router'
export default function Post() {
  const router = useRouter()
  const { slug } = router.query
  return <h1>Post Slug: {slug}</h1>
}

サーバーサイドレンダリング

Next.js には、Server-side Renderingのサポートが組み込まれています。つまり、コード内のStaticRouterのインスタンスを削除することができます。

コード分割

Next.js はCode Splittingをサポートしています。つまり、次のようなインスタンスを削除することができます。

  • @loadable/server, @loadable/babel-plugin, @loadable/webpack-plugin
  • loadable/babel-pluginのための.babelrcの修正

また、pages/ディレクトリ内の各ファイルは、ビルド時にそれぞれの JavaScript バンドルにコード分割されます。Next.js は、ES2020 の JavaScript の動的な import()サポートしています。これを使うと、JavaScript モジュールを動的にインポートして、それを操作することができます。また、SSR でも動作します。

詳しくは、Dynamic Importsをご覧ください。

スクロール位置の復元

Next.js は Scroll Restoration をサポートしています。つまり、あなたが定義したカスタムの ScrollToTop コンポーネントを削除することができます。

next/linknext/router のデフォルトの動作は、ページの先頭にスクロールすることです。必要に応じて、これを無効にする こともできます。

もっと知りたい

https://nextjs.org/docs/routing/introduction

https://nextjs.org/docs/routing/dynamic-routes

https://nextjs.org/docs/api-reference/next/link

Discussion

ログインするとコメントできます