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) 및 기타 다양한 기능을 즉시 제공하는 환상적인 프레임워크입니다. 그러나 이러한 기능은 소규모 프로젝트에는 과잉일 수 있으며 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 애플리케이션 설정

먼저 CRA(Create React App) 또는 Vite와 같은 도구를 사용하여 새 React.js 프로젝트를 만듭니다.

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. 종속성 전송

Next.js 프로젝트 package.json의 종속성 및 devDependency를 새 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 앱이 페이지/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.config.js와 같은 Next.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.