[NextJS] create-react-app migration to NextJS

CRA에서 NextJS로 마이그레이션

react에서 SEO관련한 문제로 해결하는 방법을 여러가지 찾다가 현재 CRA로 만들어진 웹을 nextjs로 마이그레이션을 해야하는 상황이 생겼다.

react에서 server폴더를 만들고 express서버에서 renderToString와 react-helmet을 이용해 어느정도 SEO 관련 문제를 해결할 수 있었지만 typescript를 이용한 예시가 많이 존재하지 않고 webpack 등의 설정의 복잡하고 구조도 지저분해진다는 느낌이 들어서 
구조가 잡혀있고 많은 문서들도 존재하는 NextJS를 이용하기로 하였다.
큰 이유로는 아마 hot-reload 지원 때문인 것 같다..

create-react-app을 사용한 프로젝트에서 nextjs로 마이그레이션을 하는 방법은 사실 공식 홈페이지에도 있지만 내가 적용한 내용들을 적을려고 한다.

공식 홈페이지의 마이그레이션 방법.
https://nextjs.org/docs/migrating/from-create-react-app

Migrating to Next.js: Migrating from Create React App | Next.js

공식 사이트에서 보면 먼저 package.json을 변경하는데 react-script를 삭제하고 next로 변경해주면 된다.

yarn add next

그리고 프로젝트 최상단 디렉토리에서 pages 폴더를 생성해주고 index.tsx 파일을 만든다.
다음에는 _app.tsx과 _document.tsx 파일을 만드는데

- app에는 Theme provider나 GlobalStyles와 같은 Providers Wrapper들이 들어가게 되는데 공통으로 사용하고 제일 먼저 실행되는 곳이라고 한다.
- document에는 meta tag, font 등 SEO관련한거나 외부 스크립트들을 사용하는 파일이다. 그리고 서버에서 실행되는 파일이므로 브라우저에서 사용할 로직이 먹히지 않는다고 한다.

index.tsx를 만들고 간단하게 react component처럼 만들어주고 yarn next dev를 실행하면은 tsconfig파일을 자동적으로 설정해주고 .next폴더가 생기며 서버가 실행된다.

추가적으로 기존 이미지 파일들이나 폰트 그리고 각 assets들은 전부 public폴더로 옮겨서 사용해야하는데
기존 img 태그를 사용해서 이미지를 보여줬다면 next에서는 next/image에서 Image 컴포넌트를 불러와서 src안에서 "/"로 시작하여서 이미즈를 보여준다.

import React from "react";
import styled from "styled-components";
import Image from "next/image";

const LogoComponent = () => {
  return (
    <>
      <Logo
		// - public/images/logo.svg
		src={"/images/logo.svg"}
        onClick={()=>{...}}
		layout={"fill"}
      />
    </>
  );
};

const Logo = styled(Image)``;

사실 임포트 방식으로도 사용하는데 여러 라이브러리를 사용하게 된다면 next.config.js에서 url-loader을 이용해서 svg를 url형식으로 가져와서 보여주던가 svg파일을 위해서 @svgr/webpack를 사용하거나 public폴더 말고 다른 폴더에서 사용하기 위해서 next-images를 이용하는 등 방법이 많은것같다.


* 예전에 만든 프로젝트의 경우 react의 버전이 맞지 않는데 현재는 v18버전을 사용하고 있으니 react, type/react, react-router 전부 v18로 만들어줘야 컴파일러전 type에러가 발생하지 않는다.
- 'Component' cannot be used as a JSX component 타입 에러