[Next.js] create-next-app 없이 개발 환경 구축하기

 

간단한 Todo List를 배포할 일이 생겼는데

백엔드 필요 없이 정보 제공 + 24시간용 Todo List만 할거라서

next js로 배포하고, 이후에 여력이 된다면 ssl까지 설정한 후에 도메인 바꾸는 것까지 해보려 한다.

 

프로젝트가 가벼운 대신, 해보지 않았던 것들을 많이 시도해보고자..

create-next-app 없이 개발 환경을 구축하는 것부터 시작했다.

 

---

 

1. package.json 생성

비어있는 폴더에 package.json을 먼저 생성한다.

package.json 파일을 직접 작성할 수도 있고 yarn init으로 CLI를 실행할 수도 있지만

yarn init -y

 

디폴트를 가져가려고 이렇게 했다.

 

package.json

{
  "name": "my-next-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

 

2. 필요 모듈 설치

next, react, react-dom을 설치한다.

yarn add next react react-dom

 

node 버전이 맞지 않으면 설치되지 않으니 버전 에러가 발생하면 nvm을 통해 nodejs 버전을 맞춰준 뒤에 설치하자.

 

package.json

{
  ...
  "dependencies": {
    "next": "^15.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

 

3. 실행 명령어 작성

package.json

{
 ...
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies"{
    ...
  }
}

 

4. 필요 패키지 추가

typescript와 eslint 등 필요한 패키지를 추가했다.

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

 

package.json

{
  ...
  ,
  "scripts": {
    ...
  },
  "dependencies": {
    "@types/node": "^22.10.1",
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    "eslint": "^9.16.0",
    "eslint-config-next": "^15.0.4",
    "next": "^15.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "typescript": "^5.7.2"
  }
}

 

5. tsconfig.json 작성

다른 블로그에서 작성해주신걸 슥삭 긁어왔다. 하나씩 읽어보면서 어떤걸 의미하는지 보기 너무 좋았음.. 감사합니다 🙇🏻‍♀️

아마도 딥다이브 모던 리액트 도서가 출처인 듯 합니다!

 

tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig.json",
  "compilerOptions": {
    // 타입스크립트를 JS로 컴파일할때 사용하는 옵션
    "target": "ES5", // TS가 변환을 목표로하는 언어의 버전 (ES5를 사용했기에 화살표함수 -> 일반함수로 변환)
    "lib": ["dom", "dom.iterable", "esnext"], //프로젝트에서 ES5를 목표하면 Promise등 존재를 모른다. 하지만 esnext를 추가함으로 신규기능에 대한 API조회가 가능해진다.
    "allowJs": true, //TS가 JS파일도 컴파일 하게 할건지 결정
    "skipLibCheck": true, //라이브러리에서 제공하는 d.ts에 대한 검사 여부 결정
    "strict": true, //TS컴파일러의 엄격 모드 제어 (alwaysStrict => 모든 파일에 use strict 추가)
    "forceConsistentCasingInFileNames": true, // 파일이름의 대소문자를 구분하도록 강제
    "noEmit": true, //컴파일을 하지않고 타입체크만 함. Next.js는 swc가 컴파일을 하기 떄문
    "esModuleInterop": true, //coommonJS방식의 모듈을 import로 가져올 수 있게 해줌
    "module": "esnext", // 모듈시스템을 설정한다.
    "moduleResolution": "node", // 모듈을 해걱하는 방식을 설정
    "resolveJsonModule": true, //JSON파일을 import할 수 있게 해줌
    "isolatedModules": true, // imoprt나 export가 파일에 없다면 단순 스크립트파일로 인식하여 해당 파일이 안 생성되도록 함
    "jsx": "preserve", // .tsx파일 내부의 JSX를 컴파일하는 방식을 설정한다. preserve는 변환하지않고 그대로 유지하는 방식
    "incremental": true, // 마지막 정보를 .tsbuildinfo파일 형태로 디스크에 저장하여 컴파일을 더 빠르게 수행할 수 있다.
    "baseUrl": "src", // 모듈을 찾을 때 기준이 되는 디렉토리 지정
    "paths": {
      //상대경로가 아닌 절대경로를 사용할 수 있게 해줌
      "#pages/*": ["pages/*"],
      "#hooks/*": ["hooks/*"],
      "#types/*": ["types/*"],
      "#components/*": ["components/*"],
      "#utils/*": ["utils/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], //TS컴파일 대상에서 포함시킬 파일 목록
  "exclude": ["node_modules"] // 타입스크립트 컴파일 대상에서 제외시킬 파일 목록
}

 

6. next.config.js 작성

 

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  poweredByHeader: false,
  eslint: {
    ignoreDuringBuilds: true,
  },
};

module.exports = nextConfig;

 

린트 설정은 개발하면서 하나씩 맞춰갈 예정..! (안터지겠지 ..?)

 

yarn dev _ localhost:3000 결과

 

 

References

https://velog.io/@bluecoolgod80/CRN-%EC%97%86%EC%9D%B4-NEXT.js-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-1

CRN 없이 NEXT.js 구성하기

https://s0ojin.tistory.com/75

[Next.js] 직접 Next.js 개발환경 구축하기

책 모던 리액트 딥 다이브