ReactからNext.jsに移行する手順（リプレイス）
ReactからNext.jsへ移行したので、その手順をまとめました。（移行する場合は先にバックアップを取るなどをして自己責任でお願いします）
Next.jsをインストールする
まずは下記コマンドを実行してNext.jsをインストールします。バージョン指定をしない場合、最新バージョンがインストールされます（僕はNext.jsバージョン14の時にリプレイスしています）
npm install next react react-dom
package.jsonを修正
次にpackage.jsonの中身をNext.js用に書き換えます。
修正前のコード
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"rm": "rm -rf docs",
"mv": "mv build docs",
"deploy": "npm run rm && npm run build && npm run mv"
},
修正後のコード
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"test": "echo \"Error: no test specified\" && exit 1"
}
ちなみにReactではnpm startでアプリを起動できますが、Next.jsではnpm run devで起動できます。
Next.jsのAppRouter機能を使う
Next.jsはバージョン13以降からpagesではなくAppディレクトリ配下のファイルをルーティングできるように仕様が変わりました。そのため、rootディレクトリにあるsrcディレクトリにappディレクトリを作成します。appディレクトリを作成したら、appディレクトリにpageファイルとlayoutファイルを作成します。
- appディレクトリを作成
- page.jsxを作成
- layout.jsxを作成
補足
appディレクトリ：Next.jsのルーティング機能が使える。appディレクトリ配下に作成したファイルはファイル名がURL部分になる。例） app/work.jsxなら/work
page.jsx：pageファイルに記載したコードで画面表示ができる。
layout.jsx：共通コンポーネントをここにかく。
npm install
npm installを実施します。
npm install
Next.jsで画像を表示する方法
Next.jsで画像を表示するには、画像を表示したいコンポーネントで下記をインポートしてからImageタグを用いて画像を表示することができます。
import Image from "next/image";
import NextSnsAppImg from "../../../public/images/next-sns-app.png";
<Image src={TodoApp} alt="works-image" />
next.config.jsをrootディレクトリに新規作成
next.config.jsをrootディレクトリに手動で作成します。中身は下記を参考に記述します。
/** @type {import('next').NextConfig} */
const nextConfig = {}
module.exports = nextConfig
Vercelにデプロイしている場合
Reactで制作したアプリをVercelにデプロイしている場合、Next.jsに変えることでVercel側のビルド設定などを変更する必要があります。もし設定を変更しなければ、React用の設定になっているため、そのままデプロイするとエラーになります。たとえばビルドエラーやoutディレクトリが存在しないなどのエラーが出ます。
僕はこのエラーを一つ一つ解決しようと試みましたが、なかなかうまくいかなかったのと、時間がかかりそうと判断したため、Vercel側のデプロイしているプロジェクトを一旦Vercel側で削除しました。その後、再度VercelでImportしなおしました。
そうすることでNext.jsに切り替えたアプリは、Vercel側でもNext.jsアプリとして認識してくれるので、自分で設定を変える必要がなくなります。僕はこれでNext.jsに切り替えたアプリを無事Vercelにデプロイすることができました。
Discussion