🚀

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

2021.10.02に公開

Next.js

tech

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

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

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

Migrating from React Router

このガイドは、Next.jsで React Router からファイルシステムベースのルートに移行する方法を理解するのに役立ちます。next/linkとnext/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/link と next/router のデフォルトの動作は、ページの先頭にスクロールすることです。必要に応じて、これを無効にすることもできます。

もっと知りたい

Discussion

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