FrontOverflow
처음 만난 Next.js
0. 준비하기
0.1
TypeScript
0.2
(실습) Node.js와 npm 설치하기
0.3
(실습) VS Code 설치하기
0.4
마치며
1. Next.js 소개
1.1
React와 Next.js
1.2
CSR vs SSR
1.3
SSG (Static Site Generation)
1.4
Next.js의 탄생 배경
1.5
2. Next.js 시작하기
2.1
(실습) 직접 Next.js 앱 생성
2.2
(실습) create-next-app을 사용해서 Next.js 앱 생성
create-next-app
2.3
(실습) Global Styles 설정 및 ESLint 규칙 변경
2.4
3. Routing
3.1
Routing 기초
3.2
Pages Router
3.3
App Router
3.4
Linking 및 Navigating
3.5
(실습) Routes 구성하기
3.6
(실습) Parallel Routes 사용하기
3.7
(실습) Intercepting Routes 사용하기
3.8
4. Pages와 Layouts
4.1
Pages
4.2
Layouts
4.3
Templates
4.4
Metadata
4.5
(실습) Root Layout 만들기
4.6
(실습) Feed Layout 만들기
4.7
(실습) Template 적용해보기
4.8
(실습) Static Metadata 사용해보기
4.9
(실습) Dynamic Metadata 사용해보기
4.10
(실습) 동적으로 Open Graph 이미지 생성하기
4.11
5. Route Handlers
5.1
Pages Router의 API Routes
5.2
App Router의 Route Handlers
5.3
Route Handlers 사용 예시
5.4
(실습) Route Handlers를 활용하여 API 만들어보기
5.5
6. Middleware
6.1
Middleware란?
6.2
Next.js의 Middleware
6.3
(실습) Middleware 사용해보기
6.4
7. Date Fetching
7.1
fetch
7.2
Server Actions
7.3
(실습) 서버에서 데이터 받아오기
7.4
(실습) Server Actions 사용해보기
7.5
8. SWR
8.1
SWR 소개 및 역할
8.2
Data Fetching
8.3
Mutation & Revalidation
8.4
(실습) SWR 사용해보기
8.5
9. Rendering
9.1
Rendering Fundamentals
9.2
Server Components
9.3
Client Components
9.4
Server와 Client Composition Patterns
9.5
Edge와 Node.js Runtimes
9.6
(실습) Server Components 사용해보기
9.7
10. Caching
10.1
Request Memoization
10.2
Data Cache
10.3
Full Route Cache
10.4
Client-side Router Cache
10.5
Cache Interactions
10.6
캐싱 관련 API
10.7
캐싱 요약
10.8
(실습) 캐싱 동작 확인해보기
10.9
11. Styling
11.1
CSS Modules와 Global Styles
11.2
Tailwind CSS
11.3
CSS-in-JS
11.4
Sass
11.5
(실습) Tailwind CSS 사용해보기
11.6
12. Optimizing
12.1
Image Optimization
12.2
Fonts
12.3
Scripts
12.4
Lazy Loading
12.5
Static Assets
12.6
(실습) Image 최적화 적용하기
12.7
(실습) Font 최적화 적용하기
12.8
(실습) Lazy Loading 적용하기
12.9
13. Configuring
13.1
next.config.js 파일
next.config.js
13.2
환경 변수 설정
13.3
(실습) 환경 변수 사용해보기
13.4
(실습) Redirect 적용하기
13.5
(실습) Rewrite 적용하기
13.6
14. Testing
14.1
프론트엔드 테스트의 종류
14.2
Vitest
14.3
Jest
14.4
Playwright
14.5
Cypress
14.6
(실습) Jest로 테스팅하기
14.7
(실습) Playwright로 테스팅하기
14.8
15. Build & Deploying
15.1
Build의 개념
15.2
Next.js 애플리케이션 빌드
15.3
(실습) Next.js 애플리케이션 빌드해보기
15.4
16. Mini Project
16.1
미니 커뮤니티 기획하기
16.2
(실습) Next.js 애플리케이션 생성하기
16.3
(실습) 폴더 구성하기
16.4
(실습) 페이지 생성하기
16.5
16.6
(실습) Shadcn UI 및 Tailwind CSS 연동하기
16.7
(실습) 데이터베이스 설계하기
16.8
(실습) Turso 데이터베이스 생성하기
16.9
(실습) Drizzle ORM 연동 및 데이터베이스 schema 생성
16.10
(실습) NextAuth 연동하기
16.11
(실습) Route Handlers로 API 만들기
16.12
(실습) 클라이언트 API 호출을 위한 함수 구현하기
16.13
(실습) SWR 연동하기
16.14
(실습) Header 컴포넌트 구현하기
Header
16.15
(실습) Route Groups를 사용하여 여러 RootLayout 구현하기
16.16
(실습) SignInPage 구현하기
SignInPage
16.17
(실습) SignUpPage 구현하기
SignUpPage
16.18
(실습) MainPage 구현하기
MainPage
16.19
(실습) PostWritePage 구현하기
PostWritePage
16.20
(실습) PostViewPage 구현하기
PostViewPage
16.21
(실습) Middleware 만들기
16.22
(실습) 로컬에서 애플리케이션 작동 테스트
16.23
(실습) Vercel 배포하기
16.24
(실습) 배포된 애플리케이션 작동 테스트
실습에 대한 내용은 문서에서는 별도로 제공되지 않습니다.관심있는 분들은 처음 만난 Next.js 강의 또는 도서를 참고하시기 바랍니다.
처음 만난 Next.jsNext.js 기초부터 풀스택 애플리케이션 개발까지!
🔗 강의 링크
소플의 처음 만난 Next.js개념은 쉽게, 실습은 탄탄하게! 따라 하며 익히는 Next.js 입문 가이드
🔗 구매처 링크 (yes24, 교보문고, 알라딘)
개발자를 위한 슬라이드 작성 도구
마지막 업데이트: 2025년 10월 24일 04시 10분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page
13.4 (실습) Redirect 적용하기
‘ 처음 만난 Next.js ’ 강의
‘ 처음 만난 Next.js ’ 도서
