인프런 커뮤니티 질문&답변

Jin

작성한 질문수

한 입 크기로 잘라먹는 Next.js(v15)

1.3) 실습용 백엔드 서버 세팅하기

실습용 백엔드 서버 세팅이후 section02 생성후 npm run start 에러

해결된 질문

작성

안녕하세요 1.3) 실습용 백엔드 서버 세팅 이후 terminal 에서 npm run start 로 Swagger UI 까지 작동이 되었는데요. 2.1) Page Outer를 소개합니다. 에서 npx create-next-app@14 section02

를 진행하고 나면, npm run start 시 에러가 나고 있습니다. SSR 강의를 진행하면서 계속해서 백엔드 서버에 접속을 못하는데 왜 이러는 걸까요? error 사진파일 첨부하였습니다.

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

현재 프로젝트에 타입스크립트 설정 관련 오류가 존재하는 걸로 보입니다. 혹시 tsconfig.json이나 eslint.config.ts 파일을 수정하신 이력이 있으신가요? 혹은 넥스트 앱 생성시에 뭔가 다른 선택지를 입력하신건 아닌지 체크해보시면 좋을 듯 합니다.

방금 아래와 같이 확인해 본 결과 npx create-next-app@14 명령으로 생성한 넥스트 앱에는 문제가 없는 걸로 확인되었습니다.

Winterlood 🐼   ~/Documents/lab/section02   main
 npm run build

> section02@0.1.0 build
> next build

  ▲ Next.js 14.2.3

 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Collecting page data    
 ✓ Generating static pages (3/3)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (pages)                             Size     First Load JS
┌ ○ /                                     4.94 kB        83.1 kB
├   └ css/e7e46e3ce921208e.css            1.78 kB
├   /_app                                 0 B            78.2 kB
├ ○ /404                                  182 B          78.4 kB
└ ƒ /api/hello                            0 B            78.2 kB
+ First Load JS shared by all             78.9 kB
  ├ chunks/framework-ecc4130bc7a58a64.js  45.2 kB
  ├ chunks/main-48a2be0192cdda09.js       32 kB
  └ other shared chunks (total)           1.75 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

 Winterlood 🐼   ~/Documents/lab/section02   main
 npm run start

> section02@0.1.0 start
> next start

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 167ms

정확한 문제 원인 파악을 위해서는 전체 프로젝트 코드가 다 필요한 상황인데요 GitHub 또는 구글 드라이브 링크로 전달 주시면 확인해보겠습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. Jin님.

Next.js 프로젝트를 생성하고 npm run start 명령어 실행 시 에러가 발생하는 문제에 대해 설명드리겠습니다. 제공해주신 이미지와 설명을 바탕으로 문제가 JSX 파일을 처리할 때 발생하는 TypeScript 설정 오류로 보입니다.

문제의 원인

에러 메시지에서 “JSX에 대해 --jsx 플래그가 제공되지 않았다”는 내용이 보입니다. 이는 TypeScript 파일에서 JSX 구문을 사용할 때, 올바른 컴파일 옵션이 설정되지 않아 발생하는 오류입니다.

해결 방법

tsconfig.json 설정 확인하기:
- 프로젝트 루트 디렉토리의 tsconfig.json 파일을 열어 compilerOptions 섹션에 jsx 옵션이 설정되어 있는지 확인해야 합니다.
- 일반적으로 jsx 옵션은 react 혹은 react-jsx로 설정됩니다.

   {
     "compilerOptions": {
       "jsx": "react-jsx"
     }
   }

Next.js 설정 확인하기:
- Next.js는 자동으로 TypeScript 설정 파일을 생성하므로, 기본 설정이 맞는지 확인합니다. 만약 tsconfig.json이 적절히 생성되지 않은 경우, npx typescript --init 명령어로 기본 설정 파일을 생성해 보세요.
프로젝트 초기화 시 설정 확인하기:
- npx create-next-app@14 section02 실행 시, 추가 설정이 필요한지 재확인해보세요. 설치와 초기화 과정에서 오류가 발생하지 않았는지 확인합니다.

관련하여 유사한 질문들이 해결된 사례가 있는 링크를 추가로 제공드립니다:
- “Next.js 프로젝트 설정 시 TypeScript 오류 발생”

이런 설정들을 점검하신 후에도 문제가 여전히 해결되지 않는다면, 추가적인 설정 파일이나 오류 메시지를 공유해 주세요. 최대한 도움을 드릴 수 있도록 하겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Jin

작성한 질문수

전체 Q&A

질문하기