Next.js を使用して Web アプリケーションを構築したが、それを純粋な React.js アプリケーションに変換する必要がある場合、あなたは一人ではありません。簡素化、特定のプロジェクト要件、またはクライアント側レンダリングの優先のいずれの目的であっても、Next.js から React への変換は、適切なガイダンスがあれば簡単に行うことができます。この記事では、アプリケーションのコア機能を維持しながらスムーズな移行を確保するために、Next.js アプリを React.js に変換する手順を説明します。

注: React.js アプリケーションを Next.js に変換したい場合は、React.js を Next.js に変換する方法に関する私の他の記事を参照してください。

Next.js を React.js に変換する理由

Next.js は、サーバーサイド レンダリング (SSR)、静的サイト生成 (SSG)、およびその他の多くの機能をすぐに利用できる素晴らしいフレームワークです。ただし、これらの機能は小規模なプロジェクトでは過剰になる可能性があり、React.js を使用したクライアントサイド レンダリング (CSR) を好む場合は不要な場合があります。 React.js に変換すると、ビルド プロセスが簡素化され、サーバーへの依存関係が軽減され、アプリケーションのアーキテクチャをより詳細に制御できるようになります。

違いを理解する

変換プロセスに入る前に、Next.js と React.js の主な違いを理解することが重要です。

• サーバー側レンダリングとクライアント側レンダリング: Next.js は SSR と SSG をサポートしていますが、React.js は主に CSR 用です。
• ルーティング: Next.js にはファイルベースのルーティング システムが組み込まれています。 React.js では、React Router のようなライブラリを使用する必要があります。
• API ルート: Next.js を使用すると、同じプロジェクト内に API ルートを作成できます。 React.js では、通常、フロントエンドとバックエンドを分離します。

Next.js を React.js に変換する手順

Next.js アプリケーションを React.js に変換する方法に関するステップバイステップ ガイドを始めましょう。

1. 新しい React.js アプリケーションをセットアップする

まず、Create React App (CRA) や Vite などのツールを使用して、新しい React.js プロジェクトを作成します。

Create React アプリの使用:

npx create-react-app my-react-app cd 私の反応アプリ

npx create-react-app my-react-app
cd my-react-app

Vite の使用:

npm init vite@latest my-react-app --template 反応 cd 私の反応アプリ npmインストール

npx create-react-app my-react-app
cd my-react-app

2. 依存関係の転送

依存関係と devDependency を Next.js プロジェクトの package.json から新しい React.js プロジェクトの package.json にコピーします。 npm install または Yarn install を実行してインストールします。

3. コンポーネントとページの移行

Next.js コンポーネントとページ ディレクトリの内容を React.js プロジェクトの src ディレクトリにコピーします。 Next.js はルーティングにページ ディレクトリを使用するため、この構造を調整する必要があります。

4. React Router を使用してルーティングを実装する

Next.js は、ページ ディレクトリに基づいてルーティングを自動的に処理します。 React.js では、ルーティングを手動で設定する必要があります。

React Router をインストールします:

npm install 反応ルーターダム

npx create-react-app my-react-app
cd my-react-app

src/App.js でルートを設定する:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom' './Home' からホームをインポート 「./About」から About をインポート // 必要に応じて他のコンポーネントをインポートします 関数 App() { 戻る （ } /> } /> {/* 他のルートを追加します */} ルート> ルーター> ） } デフォルトのアプリをエクスポートする

npx create-react-app my-react-app
cd my-react-app

5. データ取得方法の調​​整

Next.js では、データの取得は getServerSideProps、getStaticProps、または getInitialProps を使用して行われます。 React.js では、通常は useEffect と useState.

を使用して、コンポーネント内でデータの取得を処理する必要があります。

例：

import { useState, useEffect } から 'react' 関数ホーム() { const [データ, setData] = useState([]) useEffect(() => { fetch('/api/data') // 必要に応じて API エンドポイントを更新します .then((応答) => 応答.json()) .then((データ) => setData(データ)) }、[]) return } デフォルトのホームをエクスポート

npx create-react-app my-react-app
cd my-react-app

6. API ルートの処理

Next.js アプリが Pages/api ディレクトリ内の API ルートを使用している場合、これらを別のバックエンド サービスに移行するか、外部 API からフェッチするようにフロントエンドを調整する必要があります。

オプション:

個別のバックエンドを作成する: Node.js、Express、または任意のバックエンド フレームワークを使用して API エンドポイントを設定します。
外部 API を使用する: 可能であれば、外部 API を直接使用するようにフロントエンドを調整します。

7. 環境変数の更新

Next.js は、クライアント側の変数として NEXT_PUBLIC_ というプレフィックスが付いた環境変数を使用します。 React.js で、プロジェクトのルートに .env ファイルを作成し、変数の先頭に REACT_APP_.

を付けます。

例：

REACT_APP_API_URL=https://api.example.com

npx create-react-app my-react-app
cd my-react-app

process.env.REACT_APP_API_URL を使用してコード内でアクセスします。

8. Next.js 固有の構成を削除する

next.config.js などの Next.js 固有の構成を削除します。また、不要になった Next.js 固有のインポートまたはパッケージも削除します。

9. アプリケーションをテストする

React.js アプリケーションを実行して、すべてが期待どおりに動作することを確認します。

npm 開始

npx create-react-app my-react-app
cd my-react-app

各ルートと機能を確認して、変換が成功したことを確認します。

結論

Next.js アプリケーションを React.js に変換するには、新しい React プロジェクトのセットアップ、コンポーネントの移行、ルーティングの調整、データ フェッチの別の処理が含まれます。 Next.js は多くの強力な機能を提供しますが、純粋な React.js アプリケーションは、特にサーバー側のレンダリングを必要としないプロジェクトにシンプルさと柔軟性を提供します。

Next.js を React.js に変換する方法に関するこのガイドに従うことで、シームレスに移行できるはずです。

読んでいただきありがとうございます！逆の方法に興味がある場合は、React.js アプリケーションを Next.js に変換する方法に関する私の記事を参照してください。新しいプロジェクトや記事の最新情報については、Twitter で私をフォローしてください: @jake_prins.