Если вы создали веб-приложение с использованием Next.js, но теперь вам нужно преобразовать его в чистое приложение 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) и множество других функций «из коробки». Однако эти функции могут быть излишними для небольших проектов или ненужными, если вы предпочитаете рендеринг на стороне клиента (CSR) с помощью React.js. Переход на 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.

Сначала создайте новый проект React.js, используя такой инструмент, как Create React App (CRA) или Vite.

Использование приложения Create React:

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 из package.json вашего проекта Next.js в package.json нового проекта React.js. Запустите npm install или Yarn install, чтобы установить их.

3. Перенос компонентов и страниц

Скопируйте содержимое каталогов компонентов и страниц Next.js в каталог src вашего проекта React.js. Поскольку 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 использует маршруты 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

Доступ к ним в вашем коде с помощью процесса.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. Чтобы узнать больше о новых проектах и ​​статьях, подписывайтесь на меня в Твиттере: @jake_prins.