[NextJS] Next.js 초기 세팅 테스트

https://nextjs.org/docs/getting-started

 

1. 프로젝트 설치

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

 

2. 설치 명령어 입력 후 각 단계별 설정

• What is your project named? // 원하는 프로젝트 명 설정
• Would you like to use ESLint with this project? // ESLint 사용 할건지 선택 (No) → Yes 선택시 node 버전 에러 발생
• Would you like to use 'src/' directory with this project? // src 폴더 아래에서 관리할건지 root에서 관리할건지 선택 (Yes)
• Would you like to use experimental 'app/' directory with this project? // app 디렉토리를 사용(No) → Yes 선택시 node 버전 에러 발생
• What import alias would you like configured? // import 할때 Base 경로 설정 (@/*)

 

3. dkui 패키지 적용 & 대출비교 wv react 버전과 동일(18.2.0)

//package.json
 
{
  "name": "dkweb",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.11",
    "@types/react": "18.0.32",
    "@types/react-dom": "18.0.11",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.0.3",
    "dkui": "http://172.30.2.23:8181/loan_compare/dkui.git"
  }
}

 

4. 프로젝트 시작

yarn run dev

 

5. 에러

- 참조 오류 발생

- styled-components 관련 참조 에러

배포한 패키지 내에 있는 Provider 및 theme 등을 사용해야함. 새롭게 styled-components 모듈에서 가져오게 되면 오류가 발생함.