라우팅
공유 레이아웃, 단축키가 있는 링크, 방문 기록을 갖춘 라우트로 앱을 나누세요.
이 장의 앱이 콘솔에서 실행 중이에요. ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C로 콘솔을 열고 (먼저 개발자 기능을 켜세요), 사용해 보세요.
이 장의 내용
- 라우트가 되는 파일
- 공유 레이아웃
- 뒤로 가기
- 동적 세그먼트
App Router는 Next.js App Router 규칙에 따라 app/의 파일을 URL에 매핑해요. 브라우저의 주소 표시줄과 방문 기록이 동기화되어 UI가 콘솔에서 렌더링되는 동안에도 뒤로 가기, 앞으로 가기, 딥 링크가 작동해요.
라우트가 되는 파일
목록을 별도 라우트로 옮기고 설정 페이지를 추가하세요:
app/+5text
app/ layout.tsx page.tsx → /추가: deployments/추가: page.tsx → /deployments추가: [id]/page.tsx → /deployments/dpl_8fK2추가: settings/추가: page.tsx → /settings공유 레이아웃
layout.tsx는 모든 페이지를 감싸고 페이지를 이동해도 상태를 유지해요. 상단 바와 내비게이션을 여기에 넣으세요.
app/layout.tsx+25tsx
추가: import type { ReactNode } from "react";추가: import { Box, Spacer, Text } from "@textjs/app";추가: import Link from "@textjs/app/link";추가: import { usePathname } from "@textjs/app/navigation";추가: 추가: export const metadata = { title: { default: "Acme Deploys", template: "%s · Acme" } };추가: 추가: export default function RootLayout({ children }: { children?: ReactNode }) {추가: const pathname = usePathname();추가: return (추가: <Box className="flex-col grow">추가: <Box className="flex-row h-1 px-1 gap-2">추가: <Text bold>▼ Acme</Text>추가: <Text color="subtle">{`acme.local${pathname === "/" ? "" : pathname}`}</Text>추가: <Spacer />추가: </Box>추가: <Box className="flex-row h-1 px-1 gap-3">추가: <Link href="/" shortcut="1">Overview</Link>추가: <Link href="/deployments" shortcut="2">Deployments</Link>추가: <Link href="/settings" shortcut="3">Settings</Link>추가: </Box>추가: <Box className="flex-col grow p-1">{children}</Box>추가: </Box>추가: );추가: }shortcut은 키 하나를 링크에 연결해요. 콘솔에서 1, 2, 3을 누르세요. 실제 앱에서는 각 키를 누를 때마다 URL이 바뀌어요.
뒤로 가기
useRouter()는 코드에서 페이지를 이동해요. 레이아웃에서 Backspace를 router.back()에 연결하세요:
app/layout.tsx+7-2tsx
삭제: import { Box, Spacer, Text } from "@textjs/app";추가: import { Box, Spacer, Text, useInput } from "@textjs/app";import Link from "@textjs/app/link";삭제: import { usePathname } from "@textjs/app/navigation";추가: import { usePathname, useRouter } from "@textjs/app/navigation";export default function RootLayout({ children }: { children?: ReactNode }) { const pathname = usePathname();추가: const router = useRouter();추가: 추가: useInput((e) => {추가: if (e.key === "backspace") router.back();추가: });동적 세그먼트
[id] 폴더는 params로 값을 받아요:
app/deployments/[id]/page.tsxtsx
import { Text, type PageProps } from "@textjs/app";export default function DeploymentPage({ params }: PageProps<{ id: string }>) { return <Text bold>{params.id}</Text>;}정적 호스트에서는 이런 동적 세그먼트를 index.html로 재작성하는 규칙이 필요해요. 10장에서 다뤄요.
사용해 보기
이 장을 마쳤을 때의 Acme Deploys 앱이 DevTools에서 실행 중이에요. 패드를 클릭한 뒤 아래 키를 사용하세요.
▼ 05 · 라우팅
콘솔 열기
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
앱은 DevTools에서 렌더링돼요.먼저 Safari 설정 → 고급에서 ‘웹 개발자용 기능 보기’를 켜세요. 그다음 여기를 클릭하고 2를 누르세요.
데스크톱에서 열기
이 앱은 DevTools 콘솔에서 렌더링되므로 데스크톱 브라우저가 필요해요.
퀴즈
질문 2개장을 완료하려면 모든 문제에 답하세요.