cra로 구성된 어플리케이션에 cna를 사용하지 않고 next.js를 수동으로 도입(migration)하는 방법을 정리해보았습니다.

package.json 수정

• npm uninstall react-scripts react-router-dom

• npm add react react-dom next

• script 수정

  // 전
  "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject",
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    },
  
  // 후
  "scripts": {
      "dev": "next dev -p 3001", // 후에는 그냥 next dev로 바꿈
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
    },
  

pages 폴더에 index.js 생성하기

• pages 폴더에 index.js 생성 (혹은 원래 있던 index.js를 이동시키기)

  index.js 파일 내용은 우선 테스트용으로 아래와 같이 작성

  

next 서버 실행

• npm run dev로 next.js 서버 실행

  

  

• 여기까지만 해도

  • 웹팩과 바벨에 의해 자동 컴파일링 + 번들링
  • React Fast Refresh (HMR)
  • ./pages/에 의한 SSG나 SSR이 된 것!

라우팅 방식 변경하기

• 기존 App.js에서는 react-router-dom을 이용해 라우팅

//기존 App.js

import React from "react";
import SpinButton from "./pages/SpinButton";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./App.css";
import Carousel from "./pages/Carousel";
import Navigation from "./pages/Navigation";

function App() {
  return (
    <Router>
      <div>
        <nav className="nav">
          <ul className="nav-list">
            <li>
              <Link to="/spinbutton">SpinButton</Link>
            </li>
            <li>
              <Link to="/carousel">Carousel</Link>
            </li>
            <li>
              <Link to="/navigation">Navigation</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/spinbutton">
            <SpinButton />
          </Route>
          <Route path="/carousel">
            <Carousel />
          </Route>
          <Route path="/navigation">
            <Navigation />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

• 이제 pages내의 index.js 파일에서 pages에 있는 다른 페이지들을 next/link로 라우팅 해줘야 함.

import Link from "next/link";

const HomePage = () => {
  return (
    <>
      <Link href="/SpinButton">
        <a>SpinButton 바로가기</a>
      </Link>
      <Link href="/Carousel">
        <a>Carousel 바로가기</a>
      </Link>
      <Link href="/Navigation">
        <a>Navigation 바로가기</a>
      </Link>
    </>
  );
};

export default HomePage;