[Next.js] Next.js 설치 및 Routing

✨ Next.js 설치

우선 Next.js 를 설치해보도록 하자.

🌱 준비물: VS Code / node.js

• VS Code 를 켜고 작업할 폴더를 연 다음 아래와 같은 명령어를 적어준다.

// .(현재 폴더)에 Next.js 개발 환경을 만들겠다
npx create-next-app@latest .

// 설치할거냐 말거냐 옵션들이 나올텐데 
// (? Would you like to use TypeScript ~ )
// 입맞에 맞춰 알아서...

// Next.js 를 실행
npm run dev

정말 쉽다~

---

✨ Routing

웹 프레임워크에서 가장 중요한 건 Routing 이다.
Routing 에 대한 설명 이전에 간단한 용어부터 알아보자.

이미지와 같이 웹 주소(URL) 에서 자주 사용되는 용어들로 각각의 뜻은 다음과 같다.

Domain (도메인)

• a.com
• 사용자가 웹사이트에 접근할 때 입력하는 주된 주소

 
Segment (세그먼트)

• dashboard / analytics
• Path를 /로 구분한 각각의 부분
• URL 구조를 계층적으로 구분해 페이지를 구성
• 동적 세그먼트: http://a.com/dashboard/analytics/ [id] 처럼 변수를 포함한 경로입니다.

 
Path (경로)

• /dashboard/analytics/
• 도메인 뒤에 오는, 특정 리소스나 페이지를 지정하는 부분
• 서버 내에서 특정 파일이나 페이지에 접근

---

기존의 React 에서는 react-router-dom 을 사용한 라우팅 전담 컴포넌트를 만들었는데 Next.js 는 page 폴더 안에 page 컴포넌트를 생성하면 자동으로 경로가 설정된다.

경로 설정에 대한 예시는 다음과 같다.

📁 폴더: 경로명
📄 파일: 라우팅을 위한 컴포넌트

http://localhost:3000/hyunmer/projects1/egg/[id]

📁 hyunmer
	ㄴ-- 📁 projects1 
    	ㄴ-- 📄 page.tsx
    	ㄴ-- 📁 egg / [id]
        	ㄴ-- 📄 page.tsx
    ㄴ-- 📄 page.tsx

projects1 에 대한 page.tsx

import Link from "next/link";

export default function Projects1() {
  return (
    <div>
      <Link href="/hyunmer/projects1/egg/1"> Click Here!</Link>
    </div>
  );
}