강의

멘토링

커뮤니티

Programming

/

Full-stack

Next.js 15: Full-Stack Development

Traditional React development methods and development using Next.js are completely different. This course penetrates the core of the latest Next.js 15 and teaches you the 'real' Next.js development approach. Experience how to achieve both performance and efficiency, from job portfolio projects to real-world projects. Let's develop the Next.js way! This course is structured so you can learn through hands-on experience by creating actual examples of how to apply Next.js features. You'll learn faster through actual code rather than theory, focusing on server components and covering server actions and caching strategies. Since the goal of the course is to catch up with the Next.js approach as quickly as possible, the lectures themselves are conducted using JavaScript. However, examples from each lecture created with TypeScript are additionally provided as course materials.

(5.0) 8 reviews

131 learners

  • zk202308a5410
Nextjs
fullstack
react.js
javascript
SpringBoot
JavaScript
React
JPA
Next.js

Reviews from Early Learners

What you will learn!

  • Ability to build production-level full-stack web applications using Next.js 15

  • Full-stack practice from browser to API server and DB

  • Server Actions/ SSG/ ISR and other Next.js / React feature practice

  • Authentication Processing: Perfect with NextAuth and JWT Tokens!

Next.js is optimal for building large-scale applications with React.

React's development direction is moving away from operating only in browsers toward gradually integrating with server-side operations. Next.js is the framework that most reliably supports the direction React is pursuing.


Initially, Next.js may feel like it simply makes routing convenient, but when designed around server-side components, Next.js is the most suitable choice for building large-scale applications.


Why I created this course

React is designed to work only in the browser, but Next.js can operate on both the server side and in the browser, so a new approach is needed. To properly utilize Next.js, appropriate development methods suited to it are required.


This course is designed to help you experience Next.js in minimal time and develop the ability to make appropriate decisions. After taking this course, when someone asks you 'Will you use React? Or Next.js?', the goal is for you to answer 'Next.js'.


Example System Configuration

The course examples are structured with a separate API server in mind for scalability. The API server runs using code created for each function, and this is configured to be utilized in Next.js. The Next.js server is structured to process data on the server side, and the browser cannot directly use the API server, making it as close to real-world implementation as possible.




Technologies used in the course

Backend (Provided as course materials and not included in lecture content.)

  • Spring Boot

  • JPA

  • RestController

  • JWT

FrontEnd

  • Next.js 15 (Written in JavaScript with TypeScript provided as course materials.)

  • NextAuth

  • SWR


Next.js 15

There have been many changes in Next.js 15, including changes in routing methods since Next.js 13, the emergence of React's Server Components, Server Actions, and more. By utilizing these features well, you can implement various functionalities faster than developing with traditional React.


Slow then Fast

You need to think about learning methods.

  • Theoretical concerns are - 'SLOW'

  • Creating as Fast as Possible with JavaScript - 'FAST'

  • Design processed quickly with AI at minimum - 'FAST'

  • The API server is provided with source code - 'FAST'


Examples and content created in the lectures


Todo Example: Master CRUD and Pagination with App Routing

  • Creating a Todo Example Using App Routing

  • Routing Handling and Page Components

  • Learn about layout and loading handling, error handling, and more.




Product Management: How to Achieve Both Performance and SEO with SSG/ISR

  • Static page generation using SSG

  • Periodically auto-refreshed pages (ISR)

  • Separation of Search Functionality


Authentication Processing: Perfect Implementation with NextAuth and JWT Tokens!

  • Self-authentication and social authentication (kakao) processing

  • JWT Processing and Authentication Utilization within Components

  • API Server and Access Token, Refresh Token Automatic Renewal Methods

  • Custom Login/Logout Pages


State Management: Efficiently Managing Shopping Cart Data with SWR

  • Client-centered development methods in Next.js

  • Handling callable routes in Next.js

  • How to Share Server Data Across Multiple Components Using SWR





Recommended for
these people

Who is this course right for?

  • People who want to apply Next.js examples to real-world projects

  • Frontend developer who needs to develop integration with API servers

  • Developers who want to move to the next level in React

Need to know before starting?

  • React Fundamentals

  • Understanding REST Architecture

Hello
This is

2,063

Learners

135

Reviews

267

Answers

4.8

Rating

5

Courses

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 매니저가 진행하고 있습니다.

 

2000년부터 개발을 시작하였고 벤처 기업, 중소 기업, 대기업 / 프리랜서 등의 개발 경험을 가지고 있습니다.

2010년대 부터는 주로 기업체 강의와 컨설팅을 주요 업무로 하고 있습니다.

ㄴ네이버 카페

 

주요 저서 

코드로 배우는 스프링 웹 프로젝트

코드로 배우는 스프링 부트

코드로 배우는 React

RESTful API 서버 구현

스프링 6 레거시 프로젝트

자바 웹 개발 워크북

React Native 인 액션(번역)

 

개발/강의

삼성 SDS 개발팀 근무

SK 고객행복 주식회사 근무

KT / SK / 포스데이터 / 교보 생명 / 신세계 / 아시아나 / 건강보험 관리공단 등등 기업체 강의

Curriculum

All

44 lectures ∙ (8hr 50min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

8 reviews

5.0

8 reviews

  • 양정헌님의 프로필 이미지
    양정헌

    Reviews 2

    Average Rating 5.0

    5

    98% enrolled

    백엔드 쪽은 코드만 제공 프론트엔드로 next.js 프레임워크를 어떻게 쓰는지 디렉터리에 대한 기본적인 이해를 하는데 도움이 되었습니다. 이론적인 부분과 스스로 한번 더 만들어보는 시간 가지면 체화시키는데 도움이 될 것 같아요

    • SunJ님의 프로필 이미지
      SunJ

      Reviews 10

      Average Rating 5.0

      5

      98% enrolled

      • 성낙현님의 프로필 이미지
        성낙현

        Reviews 7

        Average Rating 5.0

        5

        32% enrolled

        초보자가 쉽게 따라서 코딩해볼 수 있도록 강의가 구성되어 있습니다. 설명도 편안한게 잘 해주시고 너무 좋은 강의입니다. Next.js를 배우려고 하시는 모든분들께 추천합니다.

        • 뒤안길님의 프로필 이미지
          뒤안길

          Reviews 29

          Average Rating 5.0

          5

          32% enrolled

          강의가 어렵지 않고, 쉽게 잘 설명해주고 있습니다.

          • 박병천님의 프로필 이미지
            박병천

            Reviews 11

            Average Rating 5.0

            5

            36% enrolled

            $51.70

            zk202308a5410's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!