[Next.js] 2. App Router

 

프레임워크의 모든 부분은 라우터를 중심으로 설계되어야 합니다.
페이지 전환, 데이터 가져오기, 캐싱, 데이터 변경 및 재검증, 스트리밍, 콘텐츠 스타일 지정 등
-nextjs.org/blog/next-13-4-

 

 

0. setup

npx create-next-app@latest

TS - Y

ESLint - Y

src/ - Y

app router - Y 

alias - N : @/* 외 경로 별칭 사용 여부

...

 

1. 기본구조

public : 정적에셋 저장 장소 ( / 경로로 접근 가능하다.)

src : 모든 소스코드 저장 장소 ( @/로 바로 접근 가능하다. (../../../ 안해도 된다.) )

ㄴapp : 주소 관련 저장 장소 

next.config.ts 

tsconfig.json 

...

 

2. Page Router vs App Router

v13 이전에 사용된 방식 Page Router와

v13과 함께 도입된 새로운 방식 App Router를 비교하며 알아보자!

Page Router

• pages 디렉토리 사용
• 파일 이름 기반의 라우팅 (파일로 라우팅)
  • [param].js 파일로 동적 라우트 생성
• 레이아웃 관리 어렵다
• getStaticProps, getServerSideProps 등을 통한 데이터 패칭
• 클라이언트 컴포넌트만 사용 가능
• 간단하고 직관적인 구조

App Router

• app 디렉토리 사용
• 폴더 구조 기반의 라우팅 (폴더로 라우팅, page.js 파일이 해당 라우트의 UI 담당)
  • [param] 폴더로 동적 라우트 생성
• layout.js 파일로 간단한 레이아웃 관리
• 로딩상태, 에러처리 등을 위한 특수 파일
• 컴포넌트 내에서 직접 async/await 사용하여 데이터 패칭
• 서버 컴포넌트 기본 지원 (React 18의 새로운 기능 활용)
• 향상된 성능과 유연성

 

Page Router 방식과 비교했을때,

새롭게 도입된 App Router 방식은 많은 부분에서 강점을 가진다.

 

그중에서도

폴더 구조를 통한 라우팅, 레이아웃, 서버 컴포넌트 도입은

개발자들의 Next.js 사랑을 극대화 시킨 것 같다.

 

 

근데... 서버 컴포넌트, 클라이언트 컴포넌트 이건 다 뭔데?..

https://samdasoo2l.tistory.com/21

3. client component, CSR, SSR, sever component [Next.js]

 

 

3. 라우팅에 있어서 파일규칙

src폴더 안에 app폴더 안에 있는 파일은 특정이름으로 만들었을때 특정역할을 한다.

 

1. layout.tsx

• 하위 경로에서 공통적으로 사용되는 UI
• 최상위는 RootLayout
• 반드시 하나는 존재해야한다.
• 각 폴더에 생성이 가능하다. 계층적으로 쌓인다.
• {children} 자리에 page.tsx 컴포넌트가 들어간다.

2. template.tsx

• 변화 레이아웃(탐색 시)

3. error.tsx

• 에러 페이지
• 오류있을 때
• "use client" 필수

4. loading.tsx

• 로딩 페이지
• 기다릴 때

5. not-found.tsx

• 존재하지 않는 경로 접근
• 없을 때
• 404 페이지 대신 내가 만든 오류 페이지 제공

6. page.tsx

• 기본 페이지
• 파일 경로 정의를 위해서 필요하다. (or route.tsx)
• 컴포넌트 이름은 아무거나 괜찮다. 하지만 export default는 필수

그 외

default.tsx (modal)

global-error.tsx

route.tsx

 

 

4. 라우팅에 있어서 폴더규칙

src폴더 안에 app폴더 안에 있는 폴더는 특정이름으로 만들었을때 특정역할을 한다.

특정역할은 경로 정의를 의미한다. Next.js는 폴더 구조 기반 라우터 방식을 사용한다.

 

0. 기본 폴더

• URL 경로가 된다.

1. [ ] 다이나믹라우트

• 유동적인 주소를 만들때 사용
• 파라미터 값을 사용하고 싶다면, ( [id]의 경우, )
• 서버 컴포넌트에서는 :
  • await 키워드 사용해야 한다. (params, searchParams(Query String 사용 시) 모두 Promise 객체)
  • (props) > props.params.id 를 통해서 입력된 값을 받아 올 수 있다.
  • ({params}) > params.id 를 통해서 입력된 값을 받아 올 수 있다.
  • ({params:{id}}) > id 를 통해서 입력된 값을 받아 올 수 있다.
• 클라이언트 컴포넌트에서는 :
  • import {usePathname} from "next/navigation"
  • const pathname = usePathname();
  • + useSearchParams를 통해서 query의 value도 가져올 수 있다.
• https://samdasoo2l.tistory.com/23

2+α. Props(params, query) [Next.js]

 

2. ( ) 라우트그룹

• 그룹짓기
• URL 경로에 영향을 주지 않는 폴더(경로) 그룹
• 각각의 layout.tsx 제작 가능 (장점장점!)

3. _ 프라이빗 라우트 

• 폴더 정리용으로 사용
• 목적없이 사용
• 주로 _components 로 사용

4. (.) (..) (...) 인터셉팅 라우트

• 경로 가로채기
• 현재 레이아웃에서 다른 URL 경로를 출력
• (.) : 같은 레벨 세그먼트
• (..) : 한 레벨 상위 세그먼트
• (..)(..) : 두 레벨 상위 세그먼트
• (...) : 루트 레벨 세그먼트

5. @ 페러렐 라우트 

• 하나의 레이아웃에서 병렬로 경로 처리 가능
• 한 화면에 두개를 동시에 보여줄 때
• URL 경로에 영향을 주지 않는 폴더(경로) 그룹
• 여러 페이지나 컴포넌트를 병렬로 로드하고 렌더링 가능 (로딩 시간 단축 > 더 나은 사용자 경험)
• 혁! 신!

인터셉팅 라우트, 페러렐 라우트 이해는 Modal로

https://samdasoo2l.tistory.com/22

2+α. Modal [Next.js]

 

 

 

5. 페이지 이동

1. Link

• 컴포넌트 방식 페이지 이동
• 페이지 전체를 새로고침 하지 않는다. (a태그)
• 최적화된 페이지 이동이 가능하다.
• prefetch 옵션 : 뷰포트에 보여질때, 미리 연결된 경로의 데이터를 가져와 탐색 성능 향상이 가능하다.

2. redirect

• 프로그래밍 방식 페이지 이동
• 서버 컴포넌트에서 사용
• 서버 쪽에서 redirect 시키는 것이기에 라우터 인터셉팅 작동 X 
• import {redirect} from "next/navigation"
• return redirect("-");
• + redirect는 try-catch문에서 사용하면 안된다.

3. uesRouter

• 프로그래밍 방식 페이지 이동
• 클라이언트 컴포넌트에서 사용 ("use client" 필수)
• import {useRouter} from "next/navigation"
• const router = useRouter();
• router.push(`원하는 주소`) : 페이지 이동
• router.replace(`원하는 주소`) : 페이지 대체(뒤로가기X)
• router.back() : 페이지 뒤로가기
• https://samdasoo2l.tistory.com/23

2+α. Props(params, query) [Next.js]

 

 

6. 디자인

1. CSS Module

2. Sass

3. Styled Component

4. Tailwind 

5. Emotion

6. Vanilla extract

 

7. 이미지

이미지는 img가 아니라 Image태그를 사용한다.

 

import Image from "next/image";

<Image src={-} alt={-} width={-} height={-}>

 

Next.js가 알아서 자동으로 최적화 해준다.

지연 로딩, 브라우저 캐싱, 크기 최적화 등!