Programming/next.js

React 프로젝트를 Next.js로 변경하기

Fillim 2024. 12. 4. 12:21

React 프로젝트를 Next.js로 마이그레이션하면 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 SEO 최적화와 같은 기능을 쉽게 활용할 수 있습니다.
이번 글에서는 React 프로젝트를 Next.js로 변경하는 방법을 단계별로 설명합니다.

 

1. 왜 Next.js로 변경해야 할까요?

React는 강력한 라이브러리지만, Next.js는 아래와 같은 추가적인 이점을 제공합니다:

  1. 서버사이드 렌더링(SSR)
    • 검색 엔진 최적화(SEO)에 적합
    • 초기 로딩 속도 향상
  2. 정적 사이트 생성(SSG)
    • 페이지를 미리 렌더링하여 빠른 성능 제공
  3. 파일 기반 라우팅
    • React Router 설정 없이 폴더 구조만으로 라우팅 관리 가능
  4. 내장 API 라우트
    • 백엔드 API를 쉽게 추가 가능

 

2. Next.js 설치

프로젝트 초기화

React 프로젝트가 이미 있다면 Next.js로 쉽게 전환할 수 있습니다.

npm install next react react-dom

프로젝트 구조 업데이트

Next.js는 기본적으로 특정 폴더 구조를 사용합니다. 기존 React 프로젝트를 아래와 같이 재구성합니다:

기존 React 구조

src/
├── components/
├── pages/
├── App.js
└── index.js
 

Next.js 구조

/
├── components/
├── pages/
│   ├── index.js
│   ├── about.js
│   └── api/
├── public/
└── next.config.js

 

3. 주요 변경 사항

1) 진입점 파일 변경

React의 index.js는 Next.js의 /pages/index.js로 이동합니다.

React

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Next.js

// pages/index.js
export default function Home() {
  return <h1>Welcome to Next.js!</h1>;
}

 

2) 라우팅 변경

React Router 대신 Next.js의 파일 기반 라우팅을 사용합니다.

React Router

// App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

Next.js

React Router 없이 pages/ 폴더 구조만으로 라우팅이 자동 설정됩니다.

// pages/index.js
export default function Home() {
  return <h1>Home Page</h1>;
}

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

 

3) 정적 파일 이동

React 프로젝트의 public 폴더와 동일한 역할을 Next.js에서도 합니다.

React

정적 파일을 src/assets에 저장

<img src="./assets/logo.png" alt="Logo" />

Next.js

정적 파일을 /public에 저장

<img src="/logo.png" alt="Logo" />

 

4) 데이터 가져오기 변경

React에서는 데이터를 가져올 때 useEffect를 사용합니다.
Next.js에서는 getServerSideProps 또는 **getStaticProps**를 사용하여 SSR/SSG를 처리할 수 있습니다.

React

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch('/api/data')
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return <ul>{data.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;
}

export default Home;

Next.js

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await res.json();

  return { props: { data } };
}

export default function Home({ data }) {
  return <ul>{data.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;
}

 

4. SEO 최적화

Next.js는 <head> 태그 관리를 위해 내장된 Head 컴포넌트를 제공합니다.

React

import React from 'react';

function Home() {
  return (
    <>
      <title>Home Page</title>
      <meta name="description" content="This is the home page" />
    </>
  );
}

export default Home;

Next.js

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Home Page</title>
        <meta name="description" content="This is the home page" />
      </Head>
      <h1>Welcome to Next.js!</h1>
    </>
  );
}

 

5. Next.js의 추가 기능 활용

  1. API 라우트
    • /pages/api 폴더에서 API 엔드포인트를 생성할 수 있습니다.
  2. 이미지 최적화
    • next/image를 사용하여 자동 이미지 최적화를 제공합니다.
  3. CSS 및 스타일링
    • CSS Modules 또는 styled-components와 완벽 호환됩니다.

 

React 프로젝트를 Next.js로 전환하면 성능과 SEO가 향상되고 유지보수가 쉬워집니다.
이 글을 따라 React 프로젝트를 Next.js로 성공적으로 변경해 보세요!

'Programming > next.js' 카테고리의 다른 글

Next.js의 next/image: 이미지 최적화의 완벽 솔루션  (2) 2024.12.07
Next.js: next/router 로 라우팅을  (1) 2024.12.07
Next.js로 SEO 최적화: 검색 엔진에서 웹사이트 순위 올리기  (2) 2024.12.04
Next.js: React 애플리케이션을 더 빠르고 강력하게  (1) 2024.12.04

'Programming/next.js'의 다른글

  • 현재글React 프로젝트를 Next.js로 변경하기

관련글

티스토리툴바