[Nextjs] create-next-app

create-next-app

Nextjs를 구성할 때 앱을 구성하기 위한 기초 설정들(eslint, alias, tailswind css, typescript)를 편하게 설정해서 nextjs 앱을 만들어주는 CLI라고 할 수 있다.

 

npx create-next-app@latest

or

yarn create next-app

대화형 설치 방식

위의 명령어를 실행하게 되면 아래와 같이 여러 기초 설정들을 설정할지에 대한 정보들을 알려준다. 그래서 더 간편하게 앱을 구성할 수 있다고 할 수 있다.

What is your project named?  my-app
Would you like to use TypeScript?  No / Yes
Would you like to use ESLint?  No / Yes
Would you like to use Tailwind CSS?  No / Yes
Would you like to use `src/` directory?  No / Yes
Would you like to use App Router? (recommended)  No / Yes
Would you like to customize the default import alias?  No / Yes

create-next-app과 nextjs를 직접 구성하는 경우의 차이점

create-next-app을 사용하지 않고 nextjs를 구성하는 경우의 차이점을 찾아본 결과,

- create-next-app은 nextjs 공식 팀에서 관리를 하기 때문에 최신 기능과 dependency문제나 보안적으로 더 안정적이라고 할 수 있다고 한다.

- 수동 설정의 경우 초기 구성의 설정들을 직접 해야하지만 CLI의 경우 간단한 명령어들을 커맨더로 통해서 자동적으로 설정해 줘서 편리성이 있다고 할 수 있다고 한다.

- 수동의 경우 직접 폴더를 구성해야하지만 CLI는 필수파일과 폴더구조가 자동적으로 생성된다.

 

 

create-next-app의 장점

1. 오프라인 지원 - 자동적으로 오프라인상태인지 확인을 하고 로컬 프로젝트의 캐시데이터를 통해서 프로젝트를 실행한다고 한다.

2. 여러가지 예제 참고 - e.g npx create-next-app --example api-routes

https://github.com/vercel/next.js/tree/canary/examples

3. nextjs에서 공식적으로 검증 - Nextjs의 모노레포라서 기존 프레임워크와 동일한 모듈 통합 테스트들을 거쳐 배포마다 정상적으로 작동됨을 보장한다고 한다.

4. 의존성 없는 모듈 

 

 

create-next-app의 초기 package 구성

{
  "name": "travelmate",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.6.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2"
  }
}

위에서 실행방식은 next ~로 시작하는걸 알수있다. next로 빌드방식이 궁금해져서 검색해본 결과 swc 컴파일러를 사용한다고 하는데 성능과 속도향상이 기존에 사용한 webpack방식보다 더 좋다고 한다.

*nextjs에 swc를 사용하였을때의 장점으로는 nextjs를 빌드하였을때 기존 빌드 타임이 5배 빨라졌고 새로고침도 3배 빨라졋다고 한다. 

예전 create-react-app CLI로 react 앱을 구성하고 실행하는 명령어들은 react-scripts로 내부적으로 webpack과 babel이 사용되었는데 create-next-app은 다른 도구를 사용하는걸 알 수 있었다.