Next.js

1강 — 파일 기반 라우팅

2024 DTC

슬라이드 보는 법

→ / Space	다음으로
←	이전으로
↓ / ↑	같은 주제 안에서 단계 이동
O	전체 슬라이드 한눈에 보기
F	전체화면

아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다

오늘 끝나면 할 수 있는 것

Next.js 프로젝트를 만들고 띄운다
폴더를 만들어 주소를 만든다
주소에서 값을 꺼내 쓴다
여러 화면이 공통 틀을 나눠 쓴다

Next.js란?

React로 웹사이트를 만들 때
매번 하던 일들을 미리 해둔 도구

Next.js란? React의 빈자리

            
              npm install react-router-dom
              // 라우팅 직접 설치

              // 검색엔진이 빈 화면만 본다
              <div id="root"></div>

              // 첫 화면이 뜰 때까지 흰 화면

React만으로는

매번 직접 해결해야 한다

Next.js란? 해주는 일

라우팅	폴더만 만들면 끝
SEO	서버에서 미리 그려서 보낸다
데이터	컴포넌트에서 바로 가져온다
이미지 · 폰트	알아서 최적화
배포	Vercel에 그대로

오늘 배울 것

1. 프로젝트 만들기
2. 파일 기반 라우팅
3. Link로 이동하기
4. 동적 라우트
5. layout
6. 특별한 파일들

1. 프로젝트 만들기

Next.js 앱을 띄우려면

1. 프로젝트 만들기

            
              npx create-next-app@latest my-app
              cd my-app
              npm run dev

Local: http://localhost:3000

1. 프로젝트 만들기 구조

my-app/ ├─ app/ 여기가 전부다 │ ├─ layout.js 공통 틀 │ ├─ page.js 첫 화면 │ └─ globals.css ├─ public/ 이미지 등 └─ next.config.mjs

1. 프로젝트 만들기 첫 화면

            app/page.js
            
              export default function Page() {
                return <h1>안녕하세요</h1>;
              }

안녕하세요

2. 파일 기반 라우팅

주소를 만들려면

2. 파일 기반 라우팅 React에서는

            
              // React (react-router)
              <Route path="/about" element={<About />} />

주소를 코드로 등록했다

Next에서는 어떻게 할까요?

2. 파일 기반 라우팅

app/ ├─ page.js / ├─ about/ │ └─ page.js /about └─ blog/ ├─ page.js /blog └─ new/ └─ page.js /blog/new

폴더 이름이 그대로 주소가 된다

2. 파일 기반 라우팅

            app/about/page.js
            
              export default function About() {
                return <h1>소개 페이지</h1>;
              }

소개 페이지

2. 정리

폴더 = 주소 한 칸
그 안에 page.js 가 있어야 화면이 된다
page.js 없는 폴더는 주소가 아니다

3. Link로 이동하기

화면 사이를 오가려면

3. Link로 이동하기

            
              import Link from 'next/link';

              <Link href="/about">소개</Link>

소개

3. Link로 이동하기 a 태그

            
              <a href="/about">소개</a>

페이지 전체가 새로고침된다

여기서 Link 대신 a 태그를 쓰면?

3. Link로 이동하기 useRouter

            
              'use client';
              import { useRouter } from 'next/navigation';

              const router = useRouter();
              router.push('/blog');

코드로 이동시킬 때만 쓴다

4. 동적 라우트

주소에서 값을 꺼내려면

4. 동적 라우트 [id]

app/ └─ blog/ └─ [id]/ └─ page.js /blog/1, /blog/2 …

대괄호로 감싼 폴더 이름이 변수가 된다

4. 동적 라우트 params

            app/blog/[id]/page.js
            
              export default function Post({ params }) {
                return <h1>{params.id}번 글</h1>;
              }

3번 글

4. 동적 라우트 React와 비교

React

useParams()

훅으로 꺼낸다

Next.js

{ params }

props로 들어온다

5. layout

여러 화면이 틀을 나눠 쓰려면

5. layout

            app/layout.js
            
              export default function RootLayout({ children }) {
                return (
                  <html lang="ko">
                    <body>
                      <Header />
                      {children}
                      <Footer />
                    </body>
                  </html>
                );
              }

Header

각 페이지

Footer

5. layout 중첩

app/ ├─ layout.js 전체 공통 ├─ page.js └─ blog/ ├─ layout.js blog 안에서만 추가 └─ page.js

안쪽 layout은 바깥 layout 안에 들어간다

5. 정리

app/layout.js 는 필수. html과 body가 여기 있다
화면을 옮겨도 layout은 다시 그려지지 않는다
폴더마다 layout을 둘 수 있다

6. 특별한 파일들

이름만 맞추면 동작하는 파일들

6. 특별한 파일들

page.js	화면
layout.js	공통 틀
loading.js	불러오는 중 화면
error.js	에러 화면
not-found.js	404 화면

loading과 error는 3강에서 자세히

6. 특별한 파일들 not-found

            app/not-found.js
            
              export default function NotFound() {
                return <h1>페이지를 찾을 수 없습니다</h1>;
              }

페이지를 찾을 수 없습니다

정리

오늘 배운 것

한눈에

폴더	= 주소 한 칸
page.js	있어야 화면이 된다
[id]	동적 라우트. params로 들어온다
layout.js	공통 틀. children에 page가 들어간다
Link	next/link. href로 이동
not-found.js	404 화면

실습

직접 만들어봅시다

실습 과제

/, /about, /blog 세 화면 만들기
세 화면을 오가는 메뉴를 layout에 넣기
/blog/[id] 로 글 상세 화면 만들기
없는 주소로 가면 404 화면 보여주기

더 볼 것

끝

2강에서는 코드가 어디서 도는지 배웁니다