如果您使用 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 App：

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

使用Vite：

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

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 react-router-dom

在 src/App.js 中設定路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    
      
        } />
        } />
        {/* Add other routes */}
      
    
  )
}

export default App

5. 調整資料取得方式

在 Next.js 中，資料取得是使用 getServerSideProps、getStaticProps 或 getInitialProps 完成的。在 React.js 中，您需要在元件內處理資料獲取，通常使用 useEffect 和 useState。

例子：

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return 
{/* Render your data */}
}

export default Home

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

使用 process.env.REACT_APP_API_URL 在程式碼中存取它們。

8. 刪除 Next.js 特定配置

刪除任何 Next.js 特定配置，例如 next.config.js。另外，刪除不再需要的任何特定於 Next.js 的匯入或套件。

9. 測試您的應用程式

運行您的 React.js 應用程式以確保一切按預期工作。

npm start

檢查每條路線和功能以驗證轉換是否成功。

結論

將 Next.js 應用程式轉換為 React.js 涉及設定一個新的 React 專案並遷移元件、調整路由以及以不同方式處理資料擷取。雖然 Next.js 提供了許多強大的功能，但純 React.js 應用程式提供了簡單性和靈活性，特別是對於不需要伺服器端渲染的專案。

按照本指南了解如何將 Next.js 轉換為 React.js，您應該可以實現無縫轉換。

感謝您的閱讀！如果您有興趣反其道而行之，請查看我關於如何將 React.js 應用程式轉換為 Next.js 的文章。有關新項目或文章的更多更新，請在 Twitter 上關注我：@jake_prins。