ch10

4.5 페이지 이동

4.5.1 Link 컴포넌트

next/link 패키지에 있는 컴포넌트
- import Link from "next/link"
Next.js의 App 라우터의 라우팅 기능을 구현한 컴포넌트
a 태그 대신 사용
- Link 컴포넌트는 렌더링 되면 a 태그로 바뀜

app/layout.tsx 수정

import Link from "next/link";
...
<li><Link href="/" className={`hover:underline`}>Home</Link></li>
<li><Link href="/about" className={`hover:underline`}>About</Link></li>
<li><Link href="/posts" className={`hover:underline`}>게시판</Link></li>
<li><Link href="/user/login" className={`hover:underline`}>로그인</Link></li>
<li><Link href="/user/signup" className={`hover:underline`}>회원가입</Link></li>
...

app/posts/layout.tsx 수정

import Link from "next/link";
...
<li><Link href="/posts" className="block hover:bg-gray-700 p-2 rounded">목록 조회</Link></li>
<li><Link href="/posts/new" className="block hover:bg-gray-700 p-2 rounded">글쓰기</Link></li>
...

활성 링크 체크

usePathname() 훅을 이용해서 url 확인 후 href와 비교

app/globals.css 작성

...
/* Tailwind CSS의 커스텀 컴포넌트 클래스 정의 */
@layer components {
  .cs-active {
    @apply text-orange-500;
  }
}

app/layout.tsx 수정

'use client';

import './globals.css';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  const pathname = usePathname();
  console.log(pathname);
  const isActive = (path: string) => pathname === path ? 'cs-active' : '';

  return (
    <html lang="ko">
      <body className="flex flex-col h-screen">
        <header className="bg-blue-500 text-white p-4">
          <nav>
            <ul className="flex space-x-4">
              <li><Link href="/" className={`hover:underline ${isActive('/')}`}>Home</Link></li>
              <li><Link href="/about" className={`hover:underline ${isActive('/about')}`}>About</Link></li>
              <li><Link href="/posts" className={`hover:underline ${isActive('/posts')}`}>게시판</Link></li>
              <li><Link href="/user/login" className={`hover:underline ${isActive('/user/login')}`}>로그인</Link></li>
              <li><Link href="/user/signup" className={`hover:underline ${isActive('/user/signup')}`}>회원가입</Link></li>
            </ul>
          </nav>
        </header>

        { children }
        
      </body>
    </html>
  );
}

4.5.2 useRouter 훅

프로그래밍 방식으로 페이지 이동 가능
페이지 이동 시 SSR, SSG, 데이터 fetching, 전환 효과 등 Next.js의 기능을 활용할 수 있으므로 직접 window.location을 사용하는 것보다 권장됨
꼭 필요한 경우가 아니라면 Link 컴포넌트 사용 권장
'use client' 지시어가 있는 클라이언트 컴포넌트에서만 사용 가능
```
'use client'
import { useRouter } from 'next/navigation';
```

주요 메서드

router.push(url): 지정한 경로로 이동(페이지 추가)
router.replace(url): 지정한 경로로 이동(페이지 교체)
router.back(): 이전 페이지로 이동
router.forward(): 다음 페이지로 이동
router.refresh(): 현재 페이지 새로고침

4.5.3 redirect

서버측에서 페이지 이동(리디렉션) 시 사용하는 함수
- 서버 컴포넌트, 서버 함수, 라우트 핸들러 등에서 사용
클라이언트 컴포넌트의 렌더링 중에는 사용 가능하지만, 이벤트 핸들러에서는 사용 불가
- 클라이언트의 이벤트 핸들러에서는 useRouter의 push/replace 사용
기본적으로 307 상태 코드로 응답
- 307 응답 상태코드: Temporary Redirect, 원래 요청 방식과 본문으로 새로운 페이지 요청, 다음번 요청에도 이전 URL 사용
서버 함수일 경우(POST 요청의 성공 페이지로 이동할 때) 303 응답 상태 코드로 응답
- 303 응답 상태코드: See Other, 새로운 페이지로 GET 요청
```
import { redirect } from 'next/navigation';
```

예시

'use server';
import { redirect } from 'next/navigation';

export async function createPost(formData) {
  // 게시글 등록 로직...
  redirect('/posts'); // 등록 후 목록으로 이동
}

4.5.4 permanentRedirect

응답 상태코드가 308인 점만 다르고 redirect와 동일
- 308 응담 상태 코드: Permanent Redirect, 원래 요청 방식과 본문으로 새로운 페이지 요청, 다음부터는 새로운 URL 사용

4.5.5 history API

브라우저의 history API 사용
- window.history.pushState
- window.history.replaceState
usePathname(), useSearchParams() 훅으로 URL과 파라미터 추출해서 low-level로 URL 변경 가능
useRouter() 훅을 사용하는게 페이지 전환 시 SSR, SSG, 데이터 fetching, 페이지 전환 효과 등 Next.js 기능을 활용할 수 있으므로 useRouter() 권장

4.5.6 next.config.ts의 redirects

선언적 redirect

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  async redirects() {
    return [
      {
        source: '/home',
        destination: '/',
        permanent: true,
      },
      {
        source: '/community/:slug',
        destination: '/posts/:slug',
        permanent: true,
      },
    ]
  },
};

export default nextConfig;

4.5.7 NextResponse.redirect

미들웨어에서 사용

사용사례: 로그인되지 않은 사용자를 로그인 페이지로 이동

import { NextResponse } from 'next/server';
import { authenticate } from 'auth-provider';

export function middleware(request) {
  const isAuthenticated = authenticate(request);

  // 인증된 사용자라면 원래의 요청작업 진행
  if (isAuthenticated) {
    return NextResponse.next();
  }

  // 인증되지 않은 사용자라면 로그인 페이지로 이동
  return NextResponse.redirect(new URL('/login', request.url));
}

export const config = {
  matcher: '/posts/new',
}

4.6 동적 라우트

고정된 URL이 아닌 바뀔수 있는 부분에 대해서 라우팅을 정의할 때 폴더명을 대괄호로 묶어서 생성
- posts/1, posts/2 -> posts/[id]
실제 요청한 URL의 동적 라우트 값은 layout, page, route, generateMetadata 함수에 params prop으로 전달됨

4.6.1 요청한 URL이 /posts/3일 경우 3을 꺼내는 방법

app/posts/1 -> app/posts/[id]로 수정

app/posts/[id]/page.tsx에 추가

export default async function InfoPage({ params }: { params: { id: string } }) {
  const { id } = await params; // Next.js 15 부터 params는 비동기 처리 필요
  await new Promise(resolve => setTimeout(resolve, 1000*2));
  return (
    <h1>상세 조회 - { id }번 게시물</h1>
  );
}

app/posts/[id]/page.tsx 파일이 있을때 매칭되는 URL과 params 값
- /posts/1 -> { id: '1' }
- /posts/2 -> { id: '2' }
- /posts/3 -> { id: '3' }
- ...
동적 라우트를 사용해서 특정 게시글에 달린 좋아요 목록, 관심글로 등록한 목록과 좋아요 상세정보, 관심글 상세 정보를 보여줄 때 만들어야 할 파일
- app/posts/[id]/[slug]/page.tsx
  - /posts/1/likes -> { id: '1', slug: 'likes' }
  - /posts/2/likes -> { id: '2', slug: 'likes' }
  - /posts/2/favorites -> { id: '2', slug: 'favorites' }
- app/posts/[id]/[slug]/[sid]/page.tsx
  - /posts/3/likes/4 -> { id: '3', slug: 'likes', sid: '4' }
  - /posts/3/favorites/4 -> { id: '3', slug: 'favorites', sid: '4' }

4.6.2 Catch-all 세그먼트

대괄호 안에 줄임표 ...를 추가하면 하위 경로가 더 있어도 매칭됨
매칭된 값은 전체 하위 경로를 포함해서 params에 배열로 저장됨
Catch-all 세그먼트를 이용해서 특정 게시글에 달린 좋아요 목록, 관심글로 등록한 목록과 좋아요 상세정보, 관심글 상세 정보를 보여줄 때 만들어야 할 파일과 params 값
- app/posts/[id]/[...slug]/page.tsx
  - /posts/1 -> 매칭되지 않음
  - /posts/1/likes -> { id: '1', slug: ['likes'] }
  - /posts/2/likes -> { id: '2', slug: ['likes'] }
  - /posts/2/favorites -> { id: '2', slug: ['favorites']}
  - /posts/3/like/4 -> { id: '3', slug: ['likes', '4'] }
  - /posts/3/favorites/4 -> { id: 3', slug: ['favorites', '4'] }

4.6.3 Optional Catch-all 세그먼트

폴더명을 이중 대괄호로 묶어서 작성하면 Catch-all 세그먼트를 선택사항으로 지정
특정 게시글과 댓글 목록, 댓글 상세 정보를 하나의 page로 처리할 경우 params 값
- app/posts/[id]/...slug/page.tsx
  - /posts/1 -> { id: '1' }
  - /posts/2 -> { id: '2' }
  - /posts/3/replies -> { id: '3', slug: ['replies'] }
  - /posts/3/replies/2 -> { id: '3', slug: ['replies', '2'] }

4.6.3 generateStaticParams() 함수

동적 라우트로 구성된 페이지의 params를 미리 지정해서 빌드시 해당 파라미터를 가지는 페이지를 정적으로 생성(SSG)

미리 생성할 정적 페이지의 params를 배열로 반환하도록 작성

// 이 함수가 반환한 배열만큼 SSG 페이지를 미리 생성
// 빌드하면 .next/server/app/posts/1.html, 2.html, 3.html
export function generateStaticParams() {
  // 공지글에 대한 fetch 작업
  const posts = [
    { id: '1', title: '1번 제목' },
    { id: '2', slug: '2', sid: '3', title: '2번 제목' },
    { id: '3', slug: '2', sid: '3', title: '4번 제목' },
  ];

  return posts;
}

export default async function Page({ params: { id } }){
  const resJson = await fetchPost(id);
  let data = resJson.ok ? resJson.item : null;
  return (
    ...
  );
}

빌드 할 때 동작 순서
1. 빌드시 generateStaticParams() 함수 호출 후 반환 받은 배열의 각 요소를 params로 구성해서 Page 컴포넌트 호출
2. Page 컴포넌트에서 반환 받은 HTML을 빌드 결과로 저장(posts/1.html, 2.html, 3.html)
3. 이후 브라우저의 posts/1 요청이 오면 빌드시 만들어둔 정적 라우팅 테이블에서 매칭되는 url이 있는지 확인 후 posts/[id]/page.tsx 파일을 실행하지 않고 posts/1.html을 응답
4. 브라우저가 posts/4 요청을 보내는 경우 정적 라우팅 테이블에 매칭되는 url이 없으므로 posts/[id]/page.tsx 파일을 실행하여 응답

4.7 라우트 그룹 및 프라이빗 폴더

4.7.1 라우트 그룹

app 라우터는 app 하위 폴더가 URL 경로에 매핑됨
폴더가 URL 경로에 포함되지 않게 하고 싶을때 라우트 그룹을 생성
(폴더명) 처럼 폴더명에 ()를 붙여서 작성
URL에 영향을 주지 않고 여러 페이지를 하나의 폴더에 묶어서 관리

다른 라우트 그룹에 동일한 하위 경로 작성시 컴파일 에러 발생

project-root/
├── app/
│   ├──(user)/
│   │   ├── login/
│   │   │   └── page.tsx
│   │   ├── signup/
│   │   │   └── page.tsx

user 폴더가 라우트 경로에 포함되는 경우

login, signup 폴더를 user 폴더 하위로 그룹화 해서 관리하는 경우 경로에 user가 포함됨
```
project-root/
├── app/
│   ├── user/
│   │   ├── login/
│   │   │   └── page.tsx
│   │   ├── signup/
│   │   │   └── page.tsx
```
- /user/login -> app/user/login/page.tsx
- /user/signup -> app/user/signup/page.tsx

경로에서 user를 제외하기 위해 폴더를 제거한 경우

경로에서 user를 제거하기 위해서 user 폴더를 제거

project-root/
├── app/
│   ├── login/
│   │   └── page.tsx
│   ├── signup/
│   │   └── page.tsx

/login -> app/login/page.tsx
/signup -> app/signup/page.tsx

user 폴더를 제거하지 않고 경로에서 제거하고 싶을 때

라우트 그룹으로 관리

project-root/
├── app/
│   ├──(user)/
│   │   ├── login/
│   │   │   └── page.tsx
│   │   ├── signup/
│   │   │   └── page.tsx

/login -> app/(user)/login/page.tsx
/signup -> app/(user)/signup/page.tsx

라우트 그룹 하위에 layout 작성시 라우트 그룹 내부 페이지에만 적용

동일한 URL depth에 있는 페이지에 다른 layout을 적용하고 싶을 때는 라우트 그룹을 각각 만들고 layout 작성

account, cart, checkout 페이지에서 account, cart에만 동일한 layout을 적용하고 싶을 때

루트 레이아웃을 여러개 정의하고 싶을 때

4.7.2 프라이빗 폴더

_로 시작하는 폴더는 page 파일이 있어도 라우팅에서 제외

활용 사례
- UI 로직과 라우팅 로직 분리
- 프로젝트 및 Next.js 생태계 전반에 걸쳐 내부 파일을 일관되게 구성
- 코드 편집기에서 파일 분류 및 그룹화

4.8 라우팅 작동 방식

4.8.1 코드 분할

서버 컴포넌트를 사용하면 경로별로 코드를 작은 번들로 분할해서 브라우저가 다운로드하고 실행할 수 있으므로 데이터의 양과 응답시간이 줄어들어 성능 향상
빌드 후 .next/server/app 폴더에서 확인

4.8.2 Prefetching

<Link> 컴포넌트 사용하는 경우 링크를 누르기 전에 페이지를 미리 로드하는 작업
프로덕션 환경에서만 활성화 됨

`<Link>` 컴포넌트의 prefetch 속성에 따른 동작

false: prefetch 동작 안함
null(기본값)
- 정적 라우트일 경우 링크가 화면에 보일 때(뷰포트에 들어올 때) 전체 페이지가 프리패치되어 캐시됨
- 동적 라우트일 경우 링크가 화면에 보일 때 렌더링된 컴포넌트 트리에서 첫번째 loading.tsx 파일이 나타날 때까지만 데이터를 미리 가져옴(30초 동안 캐시됨)
  - 실제 페이지를 요청할 때(클릭 할 때) 로딩 상태를 즉시 보여 주고 이후의 내용을 가져옴
true
- 링크가 화면에 보이지 않아도(DOM에 존재하기만 하면) 정적 라우트와 동적 라우트 모두 다 전체 페이지를 미리 가져옴(5분 동안 캐시됨)
프리패칭된 데이터와 레이아웃은 30초 동안 라우터 캐시에 저장됨
- 라우터 캐시는 비활성화 시킬 수 없음
- router.refresh() 호출 시 라우터 캐시 삭제

4.8.3 부분 렌더링

페이지 이동시 공유 레이아웃은 유지한 채로 변경된 페이지만 렌더링
/posts/3 -> /posts/2로 이동시 app/layout.tsx, app/posts/layout.tsx는 다시 렌더링 하지 않음

4.8.4 이전/이후 페이지 이동

스크롤을 유지하고 라우터 캐시를 재사용

4.9 프로젝트 구성 및 라우트 관리

라우팅 폴더 내에 page, route 파일이 있는 경우에만 라우팅 됨

page와 route 파일만 라우팅 됨

4.9.1 프로젝트 폴더 구조 전략

프로젝트 파일과 폴더를 어떻게 구성할 것인지에 대해서 올바르거나 틀린 방법은 없음
여러 전략 중 팀에게 적합한 방식을 선택하고 일관성을 유지해야 함

프로젝트 파일을 app 외부에 저장

app 폴더는 라우팅으로만 사용하고 나머지 코드는 app 폴더 외부에 저장

프로젝트 파일을 app 내부에 저장

모든 코드를 app 폴더 내부에 저장

기능이나 경로별로 파일 분할

공용 컴포넌트나 라이브러리를 app 폴더 하위에 작성하고 각 페이지별로 사용할 컴포넌트나 라이브러리는 각 페이지 폴더 하위에 작성

📜 ch10 02

💻 02

25.07.01 - se5ri/React GitHub Wiki

ch10

4.5 페이지 이동

4.5.1 Link 컴포넌트

app/layout.tsx 수정

app/posts/layout.tsx 수정

활성 링크 체크

4.5.2 useRouter 훅

주요 메서드

4.5.3 redirect

예시

4.5.4 permanentRedirect

4.5.5 history API

4.5.6 next.config.ts의 redirects

4.5.7 NextResponse.redirect

4.6 동적 라우트

4.6.1 요청한 URL이 /posts/3일 경우 3을 꺼내는 방법

4.6.2 Catch-all 세그먼트

4.6.3 Optional Catch-all 세그먼트

4.6.3 generateStaticParams() 함수

4.7 라우트 그룹 및 프라이빗 폴더

4.7.1 라우트 그룹

user 폴더가 라우트 경로에 포함되는 경우

경로에서 user를 제외하기 위해 폴더를 제거한 경우

user 폴더를 제거하지 않고 경로에서 제거하고 싶을 때

라우트 그룹 하위에 layout 작성시 라우트 그룹 내부 페이지에만 적용

account, cart, checkout 페이지에서 account, cart에만 동일한 layout을 적용하고 싶을 때

루트 레이아웃을 여러개 정의하고 싶을 때

4.7.2 프라이빗 폴더

4.8 라우팅 작동 방식

4.8.1 코드 분할

4.8.2 Prefetching

<Link> 컴포넌트의 prefetch 속성에 따른 동작

4.8.3 부분 렌더링

4.8.4 이전/이후 페이지 이동

4.9 프로젝트 구성 및 라우트 관리

4.9.1 프로젝트 폴더 구조 전략

프로젝트 파일을 app 외부에 저장

프로젝트 파일을 app 내부에 저장

기능이나 경로별로 파일 분할

⚠️ **GitHub.com Fallback** ⚠️

`<Link>` 컴포넌트의 prefetch 속성에 따른 동작

⚠️ GitHub.com Fallback ⚠️