[Next.js] Next.js 시작하기(+ npm run dev 에러, CRLF 에러, Parsing error 해결)

npx create-next-app next_first

cd next_first

npm run dev

 

1. npm run dev 시 에러

$ npm run dev

> next_first@0.1.0 dev C:\development\next_first\next_first
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error: Not supported
    at Object.loadConfig [as default] (C:\development\next_first\next_first\node_modules\next\dist\server\config.js:68:78)
    at async NextServer.loadConfig (C:\development\next_first\next_first\node_modules\next\dist\server\next.js:114:22)
    at async NextServer.prepare (C:\development\next_first\next_first\node_modules\next\dist\server\next.js:96:24)
    at async C:\development\next_first\next_first\node_modules\next\dist\cli\next-dev.js:127:9
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! next_first@0.1.0 dev: `next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the next_first@0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\rnjsq\AppData\Roaming\npm-cache\_logs\2022-05-25T13_19_15_000Z-debug.log

-> 구글링 해보니 node 버전을 업그레이드 하면 된다고 해서 기존 12.13.0 버전에서

기존에 설치되어있던 버전인 16.14.2로 변경 후 실행하니 정상적으로 실행되었다.

 

nvm ls # 설치된 node version 확인

nvm use 16.14.2 # 설치되어있던 16.14.2 버전 사용

npm run dev

 

협업, node 버전 통일을 위해

.nvmrc 파일 작성

16.14.2

 

 

크롬 브라우저에서 http://localhost:3000 접속!

 

2. git add 시 에러

warning: LF will be replaced by CRLF in .eslintrc.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in next.config.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in pages/_app.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in pages/api/hello.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in pages/index.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in public/vercel.svg.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in styles/Home.module.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in styles/globals.css.
The file will have its original line endings in your working directory

-> 해결

git config --global core.autocrlf true

 

3. VS code 파싱 에러

Parsing error: Cannot find module 'next/babel' Require stack: //..... 생략

-> 해결 : 프로젝트 root 경로에 .babelrc 파일 생성

// .babelrc

{
    "presets": ["next/babel"],
    "plugins": []
}

-> root 경로에 .eslintrc.json 파일 수정

// .eslintrc.json 기존
{
  "extends": "next/core-web-vitals"
}

// 변경
{
  "extends": ["next/babel", "next/core-web-vitals"]
}