CNA(create next app)없이 수동으로 nextjs + typescript 환경 구축하기

새로운 스터디를 참여 하면서 todo 앱을 만들어보기로 했다. 

앱 환경은 nextjs, 언어는 typescript로 간다.

 

가장 먼저 앱 기본 세팅을 해야하는데 나는 항상 cna의 도움으로 세팅을 했다.

CNA(Create Next App)는 터미널에 아래와 같은 명령어를 입력하면

npx create-next-app@latest

기본적인 환경이 다 구축된 완성형(?) Nextjs 앱을 설치해주는 마법의 주문 같은 거다.

 

 

이렇게 앱을 만들어 놓으면 불필요한 파일들도 같이 따라와 설치돼 좀 불편한 면이 있다.

 

또 더욱이 추후에 바벨이나 웹팩 설정을 달리 해야할 때 어려움이 있다고 한다. 물론 나는 여지껏 웹팩이나 바벨을 달리 만져줘야하는 경우가 크게 없었고.. 필요한 경우에만 해당 코드를 긁긁 해서 복붙하는 정도에만 그쳤기 때문에. 엄청난 공감은 할 수 없지만....

그래도 뭔가를 직접 해보지 않고서는 작동 원리에 대해 깊이 있게 이해하기 힘든 거니까...(!) 이번 기회에 직접 구축해보기로 한다.

 

 

앱을 설치할 폴더를 우선 맨들고, 아래 명령어로 초기화를 시켜준다.

yarn init -y

 package.json파일이 생겼음을 확인할 수 있다.

 

그러면 그 패키지.제이슨에 스크립트를 추가한다

 

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

 

그 다음 실제 서비스에 필요한 패키지들을 설치해 준다.

yarn add react react-dom next

next.js는 React의 (SSR을 지원해주는) 프레임워크이므로, 결국 React 기반으로 작동한다. 그러므로 react, react-dom은 필수적으로 설치되어야 한다.

 

위의 패키지들은 배포에 필수적이므로 dependencies에 저장한다.

 

 

그 다음 개발 환경에서 필요한 패키지들을 설치한다.

yarn add --dev typescript @types/react @types/node @types/react-dom eslint eslint-config-next

package.json에서 패키지를 dependencies와 devDependencies로 구분하는 이유는,

불필요하게 많은 양의 패키지들을 몽땅 배포하게 되는 불상사를 막기 위함이다.

 

- dependencies - 실제 서비스에서 필요한 패키지들 (배포할때는 여기에 존재하는 패키지만 사용한다)

- devDependencies - 개발 환경에서만 필요한 패키지들 (빌드할때만 쓰이고 배포에는 없어도 무방한 패키지들이다)

 

typescript 패키지 역시 typescript -> javascript 코드로 변환하는 컴파일러 역할을 하므로 개발 시에만 쓰인다. 예외적으로 typescript로 쓰여진 라이브러리를 활용할 경우 dependencies에 들어가야 하기도 하지만, 그런 예외 상황은 딱히 겪어보지 않았기에 dev에 넣었다.

 

 

마침내 요렇게 적용됐다. 따란!

 

그 다음 화면이 구현될 app, 정적 에셋들이 들어갈 public 폴더를 각각 만들었다.

이전에는 pages 폴더에서 라우팅이 됐는데, nextjs가 버전 13으로 넘어가면서 App Router라는게 생겼다.

요 App router라는게 처음 도입되면서 여러가지 문제점들도 있는거 같은데 이건 차차 진행하면서 해결해보기로 했다.

 

 

추가로 트랜스 파일링을 원활하게 하기 위해 바벨 패키지를 설치하려고 했는데...!

React가 버전 12를 넘기면서부터 SWC 라는 컴파일러가 적용됐다고 한다. SWC는 기존 babel보다 몇십배가 빠르고 적용 방법도 간단하다고 해서, SWC를 적용하기로 했다.

 

바벨이 이미 적용돼 있는 경우 .babelrc 파일을 삭제하고 swc를 next.config.js에 설정 추가하면 된다고 한다.

아직 바벨 추가 전이므로, next.config.js만 수정하면 됐다.

 

swcMinify: true

요 옵션값만 추가하면 코드 경량화를 기존에 했던 Terser가 아닌 SWC가 처리해 준다. (속도가 7배나 빠르다고 함!)

 

 

이제 yarn build 로 빌드를 해주는데 자꾸 에러가 뜬다

app Router도 따로 설정해줘야 하는 것..

 

module.exports = {
    swcMinify: false,
    experimental: {
        appDir: true,
    },
};

experimental에 appDir 값을 추가하라고 경고 문구가 뜨길래 그대로 넣어줬다.

 

그리고 app 디렉토리 내에 page.tsx와 layout.tsx도 추가해 줬다.

 

성공!