next.js) 라우팅, SEO

🍕 세팅

1. 설치

npx create-next-app@latest

What is your project named? 폴더이름작성
Would you like to use Typescript? YES
Would you like to use ESLint? YES
Would you like to use Tailwind CSS? YES
Would you like to use `src/` directory? YES # No로 입력해도 상관 없습니다.
Would you like to use App Router? (recommended) YES
Would you like to customize the default import alias (@/*)? NO

2. 해당 폴더로 이동

cd 폴더명

🍔 폴더 구조 분석

1. 페이지 만드는 법 기본

1) app 폴더에서 파일 생성시 페이지 생성

2) 페이지 만들기 위해선 무조건 page.tsx라고 작성해야함

3) static routing - 고정된 주소

• app/page.tsx -> <주소>/
• app/detail/page.tsx -> <주소>/detail

4) dynamic routing : 유동적인 주소

5) 폴더에 [이름] 작성

• app/detail/[id]/page.tsx

2. 페이지로 만들지 않는 법

1) 페이지로 보여주고 싶지 않은 코드들은 private folders 안에 코드 작성

2) '_폴더명' 작성

3) private folders

• app/_components/Button.tsx
• url과 상관없는 파일들은 _폴더로 묶어놓기도 함

3. 역할별로 묶기

• (폴더명)
• 공통 레이아웃이 다른 경우, 다른 폴더로 묶기
• (폴더명)의 폴더명 => 주소 포함x
• group folders
  - app/(역할별 폴더명)/page.tsx
  • 주소가 똑같은 경우 app/page.tsx가 우선
  • app/(역할별 폴더명)/[id]/page.tsx

4. 레이아웃

• 공통 사용
• 파일명: layout.tsx
• ⚠️꼭 children props 사용

export default function MemberLayout({ children }: { children: React.ReactNode }) {
	return <div>공통 레이아웃이다 {children}</div>;
}

5. metadata 작성

• index.html의 head태그에 작성했었떤 추가 정보를 컴포넌트 및 페이지별로 적용 가능
• app/layout.tsx
  1) metadata import
  2) export const -> metadata 작성