1. Next.js 설치와 개발환경 셋팅

1.  Next.js 설치와 개발환경 셋팅

1) 프로젝트 생성

(1) 프로젝트 생성 코드

npx create-next-app@latest

* Page가 메인 여기에다 코드 작성

 

(2) 프로젝트를 실행

 npm run dev

page.js : 메인페이지 
layout.js : 메인페이지 감싸는 용도의 페이지

 

 

 

 

 

 

2) 페이지 라우팅

(1) 방법

nextJs는 폴더 경로만 작성해줘도 링크 이동이 가능하다.

<div className="navbar">
        <Link href="/">home</Link>
        <Link href="/list">list페이지</Link>
      </div>

(2) 라우팅을 하는 과정에서 의문점

import Link from "next/link";

이렇게 안뜨고 하단의 코드 처럼 import가 된다.

import Link from "@/node_modules/next/link";

 

이유 : 프로젝트 또는 빌드 도구에 의해 커스텀 경로 별칭을 설정한 경우에만 적용이 된다고 한다.

읭? 커스텀 경로 별칭...

 

해결방법 :

1. package.json 파일 내부에서 dependencies 또는 devDependencies 섹션에 "next" 패키지가 명시되어 있는지 확인

 -> 일반적으로 "next"가 "dependencies" 섹션에 있는 경우 import Link from "next/link";와 같은 구문을 사용할 수 있단다. 근데 난 있는데도 안됨

 

그럼, 개발 환경 설정 또는 프로젝트 구조란다.

 

 

 

2. tsconfig.json 파일 확인
-> next" 패키지가 실제로 node_modules에 설치됨

 

개발 환경 설정 또는 프로젝트 구조 문제가 아님

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

3. "next" 패키지를 "node_modules"에 설치

아이 ..참..! 혹시나 혹시나 했는데 ㅋ

 

(3) 오류

뭐가 잘못 된 건지 오류가 뜬다. 

 

소문자로 바꾸니 오류가 사라졌다.

왜??

 

3) 반복되는 컴포넌트

layout.js 안에 넣기

layout.js

Next.js는 실은 page.js를 보여줄 때
옆에 layout.js 파일이 있으면 layout.js 내용 안에 page.js 내용을 담아서 보여줍니다.