Next JS . 초기세팅

**

1. 초기세팅

# @latest : 최신 버전 설치 
npx create-next-app@latest --typescript

#.prettierrc 설정
npm install -D prettier eslint-config-prettier

 

 

** Next.js + Typescript + Styled-Components 프로젝트 초기 세팅 

Next.js + Typescript + Styled-Components 프로젝트 초기 세팅하기

2. svg 적용

next.config.mjs에 코드 추가

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['image.tmdb.org'],
  },
 
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
 
    return config;
  },
};
 
export default nextConfig;

 

[Next.js] 에서 SVG 파일 사용하는 법 (feat. svgr 웹팩 설정하기, Image tag)

3. 트러블 슈팅

npm run dev가 안되는 현상..!

 

1 ) npm install next --save으로 해결하기 

 --> 그래도 캐시 문제, node와 npm 버전문제 등등이 발생한다면 ..?

2 ) installed , active 버전이 다를 때

Nodejs - n 모듈로 Node 버전 변경이 안될 때

[npm install 오류] npm install 안될때

 
3 ) cache 문제

 

 

4 ) cannot Read File tsconfig.json

.eslintrc.json의 extends에 "@typescript-eslint/parser"를 추가

5 ) nvm cb.apply 적용 안됨

nvm cb.apply is not a function 에러 해결방법

4. NextJS 배포하기

404 에러 

Framework : NextJS

 

Root Directory

 

 

5. 공식문서

Gap - Tailwind CSS

 

Rendering: Composition Patterns | Next.js

 

6. 디렉토리 세팅

📁 public > icon

필요한 아이콘 파일은 Figma 에서 svg로 export

 

📁 src > components

* common 폴더

여러 페이지에서 사용할 공통 컴포넌트 (ex- Button, Header)

 

* 각 페이지별 폴더

각 페이지별 폴더 생성 후, 내부에 연관 컴포넌트 파일 생성하기

 

📁 src > app > pages.tx

페이지의 최상단 컴포넌트. 각 컴포넌트를 하나의 페이지에서 호출하는 곳

 

📁 src > api

api 함수 모아놓는곳

 

📦src
 ┣ 📂api
 ┃ ┣ 📜axios.ts
 ┃ ┗ 📜request.ts
 ┣ 📂app
 ┃ ┣ 📂details
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂home
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📂search
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📜favicon.ico
 ┃ ┣ 📜globals.css
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜page.tsx
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜FooterBtn.tsx
 ┃ ┃ ┣ 📜FooterLine.tsx
 ┃ ┃ ┣ 📜FooterNav.tsx
 ┃ ┃ ┗ 📜PlayBtn.tsx
 ┃ ┣ 📂details
 ┃ ┣ 📂home
 ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┣ 📜Preview.tsx
 ┃ ┃ ┣ 📜Today.tsx
 ┃ ┃ ┗ 📜Wrapper.tsx
 ┃ ┣ 📂lottie
 ┃ ┃ ┣ 📜Landing.tsx
 ┃ ┃ ┗ 📜netflixAnimation.json
 ┃ ┗ 📂search
 ┣ 📂hooks
 ┣ 📂types
 ┗ 📂utils