Skip to product information
Sopl's first encounter with Next.js
Sopl's first encounter with Next.js
Description
Book Introduction
Complete, step-by-step, from start to finish! A practical, hands-on Next.js introductory course.

Next.js is currently the most widely used React-based web framework, and it has all the key features optimized for modern front-end development, from various rendering methods such as CSR, SSR, and SSG, to folder structure-based routing and serverless function composition.
It has now become more than just a choice; it is a practical necessity and a core skill for career growth.
This book is a friendly guide that guides you step-by-step, from basic concepts to practical exercises, so that even developers new to Next.js can follow along without difficulty.
It is structured so that you can learn naturally by starting with TypeScript and setting up the development environment, understanding how Next.js works, and creating your own project structure.
In particular, we will guide you through practical exercises to easily understand the folder structure that composes pages, various screen transition methods, and the latest features centered around the app router introduced in Next.js 13.
Finally, you will experience the entire process of developing a full-stack application based on Next.js, from implementing a mini-community site with a comment function to processing forms using server actions, connecting to a database based on Drizzle ORM, and deploying through Vercel.
  • You can preview some of the book's contents.
    Preview

index
Prepare Chapter 0
0.1 TypeScript
0.2 (Practice) Installing Node.js and npm
0.3 (Practice) Installing VS Code
0.4 In conclusion

Chapter 1: Introduction to Next.js
1.1 React and Next.js
1.2 CSR vs. SSR
1.3 SSG
1.4 Background of Next.js's Birth
1.5 In conclusion

Chapter 2: Getting Started with Next.js
2.1 (Practice) Creating Your Own Next.js App
2.2 (Practice) Creating a Next.js app using create-next-app
2.3 (Practice) Setting Global Styles and Changing ESLint Rules
2.4 In conclusion

Chapter 3 Routing
3.1 Routing Basics
3.2 Pages Router
3.3 App Router
3.4 Links and Navigation
3.5 (Practice) Configuring Routes
3.6 (Practice) Using Parallel Routes
3.7 (Practice) Using Intercepting Routes
3.8 In conclusion

Chapter 4 Pages and Layout
Page 4.1
4.2 Layout
4.3 Template
4.4 Metadata
4.5 (Practice) Creating a Route Layout
4.6 (Practice) Creating a Feed Layout
4.7 (Practice) Applying the Template
4.8 (Practice) Using Static Metadata
4.9 (Practice) Using Dynamic Metadata
4.10 (Practice) Dynamically Generating Open Graph Images
4.11 In conclusion

Chapter 5 Route Handlers
5.1 API Routes in Pages Router
5.2 Route Handler in App Router
5.3 Example of using a route handler
5.4 (Practice) Creating an API Using Route Handlers
5.5 In conclusion

Chapter 6 Middleware
6.1 What is middleware?
6.2 Next.js Middleware
6.3 (Practice) Using Middleware
6.4 In conclusion

Chapter 7 Data Fetching
7.1 fetch
7.2 Server Actions
7.3 (Practice) Retrieving data from the server
7.4 (Practice) Using Server Actions
7.5 In conclusion

Chapter 8 SWR
8.1 Introduction and Role of SWR
8.2 Data Fetching
8.3 Mutations and Revalidation
8.4 (Practice) Using SWR
8.5 In conclusion

Chapter 9 Rendering
9.1 Rendering Basics
9.2 Server Components
9.3 Client Components
9.4 Server and Client Composition Patterns
9.5 Edge Runtime and Node.js Runtime
9.6 (Practice) Using Server Components
9.7 In conclusion

Chapter 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 Caching Related APIs
10.7 Caching Summary
10.8 (Practice) Verifying Caching Behavior
10.9 In conclusion

Chapter 11 Styling
11.1 CSS Modules and Global Styles
11.2 Tailwind CSS
11.3 CSS-in-JS
11.4 Sass
11.5 (Practice) Using Tailwind CSS
11.6 In conclusion

Chapter 12 Optimization
12.1 Image Optimization
12.2 Font Optimization
12.3 Script Optimization
12.4 Lazy Loading
12.5 Static Assets
12.6 (Practice) Applying Image Optimization
12.7 (Practice) Applying Font Optimization
12.8 (Practice) Applying lazy loading
12.9 In conclusion

Setting up Chapter 13
13.1 next.config.js file
13.2 Setting environment variables
13.3 (Practice) Using Environment Variables
13.4 (Practice) Applying Redirect
13.5 (Practice) Applying Rewrite
13.6 In conclusion

Chapter 14 Test
14.1 Types of Front-End Tests
14.2 Vitest
14.3 Jest
14.4 Playwright
14.5 Cypress
14.6 (Practice) Testing with Jest
14.7 (Practice) Testing with Playwright
14.8 In conclusion

Chapter 15: Building and Deploying
15.1 Build Concept
15.2 Building a Next.js Application
15.3 (Practice) Building a Next.js Application
15.4 In conclusion

Chapter 16 Mini Project
16.1 Planning a Mini Community
16.2 (Practice) Creating a Next.js Application
16.3 (Practice) Organizing Folders
16.4 (Practice) Creating a Page
16.5 (Practice) Configuring Routes
16.6 (Practice) Integrating Shadcn UI and Tailwind CSS
16.7 (Practice) Designing a Database
16.8 (Practice) Creating a Turso Database
16.9 (Practice) Drizzle ORM Integration and Database Schema Creation
16.10 (Practice) Connecting NextAuth
16.11 (Practice) Creating an API with a Route Handler
16.12 (Practice) Implementing a Function for Calling the Client API
16.13 (Practice) SWR Linking
16.14 (Practice) Implementing a Header Component
16.15 (Practice) Implementing Multiple Route Layouts Using Route Groups
16.16 (Practice) Implementing SignInPage
16.17 (Practice) Implementing SignUpPage
16.18 (Practice) Implementing MainPage
16.19 (Practice) Implementing PostWritePage
16.20 (Practice) Implementing PostViewPage
16.21 (Practice) Creating Middleware
16.22 (Practice) Testing the application operation locally
16.23 (Practice) Deploying Vercel

Detailed image
Detailed Image 1

Publisher's Review
This book is designed to help even readers new to Next.js naturally build fundamental skills through hands-on practice.
Rather than simply listing features, it helps you follow the development flow and understand why they are needed and how they work.

Step by step, starting with setting up the development environment
From installing Node.js and VS Code to learning the basics of TypeScript, we cover the preparatory process in detail so that even readers who are new to web development can follow along without difficulty.

Systematically learn the core concepts of Next.js.
It is designed to allow you to learn the core features of Next.js through hands-on practice, from rendering methods such as CSR, SSR, and SSG to file-based routing, data fetching, and API writing.

Practice-oriented structure
It goes beyond explanation and is structured so that you can immediately check all the contents through practice, allowing you to naturally acquire the various functions of Next.js.

From basics to practical projects
After you've mastered the basics, you can apply what you've learned through a project that builds a complete web application.

★ Target audience

This book is intended for any developer who wants to learn Next.js for the first time.
It is more accessible to readers with basic React knowledge, and is particularly suitable for the following:
● Developers who want to learn React-based web development more systematically
● Developers who want to build an SEO-optimized website using SSR and SSG using Next.js
● Those who want to create their own web application using Next.js
● Front-end developers who want to gain practical project experience using Next.js

★ Structure of this book

This book is broadly divided into four parts, and each chapter is structured to allow for step-by-step learning from the core concepts of Next.js to practical application.

Your First Step into Web Development: Your First Encounter with Next.js (Chapters 0-2)
As a preparatory step for learning Next.js, we will briefly learn the basic concepts of TypeScript and set up the development environment by installing Node.js, npm, and VS Code.
Next, we will understand the relationship between React and Next.js and look at the differences between rendering methods such as CSR, SSR, and SSG.
Through the background of Next.js's creation, you will learn the necessity of the framework, create your own Next.js project, and learn the basic folder structure.

The Fastest Way to Understand Next.js: The World of Routing (Chapters 3-5)
We will learn about the routing system, which is the core of Next.js.
First, you will learn the traditional pages router based on folder structure, and then practice the concepts and usage of the modern app router.
Learn the basic operating principles and page composition methods of Next.js by experiencing various routing techniques step by step, such as dynamic routes, parallel routes, and intercepting routes.

Experience the true power of Next.js, mastering practical features (Chapters 6-15)
Learn various functions required for actual service development.
Learn how to distinguish between server and client components and control the request flow using middleware.
You will also learn how to improve site performance by applying various rendering strategies (SSR, SSG, ISR) and how to strengthen SEO by setting metadata.
We will gradually build up the skills necessary for practical work, such as database connection, user authentication, and file optimization.

Building a Next.js Web Application (Chapter 16)
We will proceed with a project to create an actual web application (mini community site) using Next.js by synthesizing what we have learned so far.
You will practice dynamic routing, data linking, and server function integration, and build a complete service yourself.
Through this course, you can naturally acquire practical development skills using Next.js.
GOODS SPECIFICS
- Date of issue: June 28, 2025
- Page count, weight, size: 696 pages | 183*235*25mm
- ISBN13: 9791169213912
- ISBN10: 116921391X

You may also like

카테고리