강의

멘토링

로드맵

Inflearn brand logo image
NEW
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) 2 reviews

65 learners

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

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!

이 강의를 제작한 이유

React는 오직 브라우저에서 동작하는 방식으로 설계되지만 Next.js는 서버 사이드와 브라우저 모두에서 동작할 수 있으므로 새로운 접근 방법이 필요합니다. Next.js를 제대로 활용하기 위해서는 그에 맞는 적절한 개발 방법이 필요합니다.


이 강의는 최소한의 시간으로 Next.js를 체험하고 적절한 의사 결정을 할 수 있는 능력을 키우는 것을 목표로 제작되었습니다. 이 강의를 듣고 난 후에 누군가 여러분에게 'React 쓸래? Next.js 쓸래?' 묻는다면 여러분은 ' Next.js'라고 대답하는 것이 목표입니다.


예제 시스템 구성

강의 예제는 API서버를 별도로 분리해서 확장을 염두에 둔 구조로 작성됩니다. API서버는 각 기능별로 제작된 코드를 이용해서 실행하고, 이를 Next.js에서 활용하는 방식으로 구성합니다. Next.js 서버는 서버쪽에서 데이터를 처리하고 브라우저에서는 API서버를 직접 사용할 수 없는 구조로 최대한 실무에 가까운 형태로 구성합니다.




강의에서 사용하는 기술

Backend (수업자료로 제공하고 강의내용에 포함되지 않습니다.)

  • Spring Boot

  • JPA

  • RestController

  • JWT

FrontEnd

  • Next.js 15 (JavaScript로 작성하고 TypeScript는 수업자료로 제공합니다.)

  • NextAuth

  • SWR


Next.js 15

Next.js 13이후의 라우팅 방식의 변화, React의 Server Component의 출현, Server Action 등 Next.js 15의 많은 변화가 있습니다. 이런 기능들을 잘 활용하면 기존의 React를 이용해서 개발하는 것보다 더 빨리 다양한 기능들을 구현할 수 있습니다.


Slow then Fast

학습 방법에 대해서 고민해야 합니다.

  • 이론적인 고민은 - 'SLOW'

  • JavaScript로 최대한 빨리 만들기 - 'FAST'

  • 디자인은 최소한으로 빨리 AI로 처리 - 'FAST'

  • API 서버는 제공되는 소스 코드로 - 'FAST'


강의에서 작성하는 예제와 내용


Todo 예제: 앱 라우팅으로 CRUD, 페이징 마스터하기  

  • App Routing를 활용해서 Todo 예제 만들기  

  • 라우팅 처리와 페이지 컴포넌트

  • layout과 loading 처리, 에러 처리등을 학습합니다.




상품 관리: SSG/ISR로 성능과 SEO를 동시에 잡는 법

  • SSG를 이용한 정적 페이지 생성

  • 주기적으로 자동 갱신되는 페이지(ISR) 

  • 검색 기능의 분리


인증 처리: NextAuth로 JWT 토큰까지 완벽하게!

  • 자체 인증과 소셜 인증(kakao) 처리 

  • JWT 처리와 컴포넌트내 인증 활용

  • API 서버와 Access Token, Refresh Token 자동 갱신 방법  

  • 커스텀 로그인/로그아웃 페이지  


상태 유지: SWR로 장바구니 데이터를 효율적으로 관리하기

  • Next.js에서 클라이언트 중심 개발 방법 

  • Next.js내 호출 가능한 경로 처리하기 

  • SWR을 이용한 서버 데이터를 여러 컴포넌트가 공유하는 법  




10월 말까지 오픈 기념 60% 할인 쿠폰(4만원 할인) 발행합니다.




https://inf.run/ryzNE

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

1,839

Learners

117

Reviews

258

Answers

4.8

Rating

4

Courses

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

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

2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.

ㄴ네이버 카페

 

Curriculum

All

44 lectures ∙ (8hr 50min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • nakjasabal0079님의 프로필 이미지
    nakjasabal0079

    Reviews 7

    Average Rating 5.0

    5

    32% enrolled

    The course is structured so that beginners can easily follow along and code. The explanations are comfortable and well-delivered, making it an excellent course. I recommend it to everyone who wants to learn Next.js.

    • dachki님의 프로필 이미지
      dachki

      Reviews 23

      Average Rating 5.0

      5

      32% enrolled

      The lectures are not difficult and are explained easily and well.

      Limited time deal

      $26.40

      48%

      $51.70

      zk202308a5410's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!