Next.js14 수동 세팅 방법(with TypeScript)

 

본 글은 Next.js14 기반으로 작성 됐습니다.

설치

create-next-app

npx 패키지를 사용하여 next.js 프로젝트를 생성할 수 있지만 프로젝트 초기세팅을 경험해보기 위해

typescript 를 적용한 프로젝트를 직접 A to Z로 생성해봤다.

npx create-next-app@latest --typescript // 타입스크립트를 사용하는 프로젝트 생성

수동설치

결론부터 말하자면 수동으로 프로젝트를 생성하는 건 생각했던 거만큼 어렵지 않았다.

오히려 npx로 생성할 때보다 직관적이고 필요 없는 파일들을 생성하지 않아도 된다는 게 맘에 들었다.

 

프로젝트를 생성 하는 과정은 다음과 같다.

 

프로젝트 폴더생성

mkdir next-test

 

생성해준 폴더에 명령어를 입력 해준다.

npm init -y

여기까지 했다면 next-test 폴더에는 package.json 이 생성 됐을것이다.

 

• package.json 에서 license 를 MIT 로 변경, script 설정에서 "dev" : "next dev" 추가
• app/page.tsx 생성 후 page에 아래와 같은 JSX 문법을 작성해준다.

  export default function page() {
      return "Hello World!"
  }​​

• 터미널에서 react 패키지들을 설치 해준다

  npm i react@latest next@latest react-dom@latest​​​

• 설치된걸 확인한 뒤 실행 명령어 커맨드 입력

  npm run dev​

위에 과정들을 하고난 뒤 app 경로에 layout.tsx 가 생성 됐을것이다.

여기까지 별 문제없이 생성 됐다면 기본적인 세팅은 끝났다.

 

TS 세팅

• npm install --save-dev @types/react @types/node 라이브러리 설치
• npm run dev 커맨드 입력후 프로젝트 잘 실행되나 확인한다.

UMD 경고?

세팅을 다 하고나니 갑자기 경고창이 생성됐다.

'React'은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다. 대신 가져오기를 추가해 보세요.

이런 경고가 자꾸 생성돼서 검색을 통해 삽질을 2시간 가량 했다.

해결이야 import React from 'react' 를 컴포넌트마다 작성하면 경고창이 안뜨지만,

원래 저 문구는 react17이상부터는 new JSX transform 지원해서 작성하지 않아도 자동으로 임포트가 돼야하기 때문에

굉장히 거슬렸다.

 

삽질한 시간에 비해 해결방법은 어렵지 않았다ㅜㅜ;

그냥 VSC를 종료했다가 다시키니 귀신같이 사라져 있었다.