강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

Dipping into the Next.js Full Course (Korean Dubbed)

A full course on Next.js you can sink your teeth into! Complete a real-world project using the latest technologies such as GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, and Grafana, and experience both the App Router and Page Router.

61 learners are taking this course

  • ludgi
Next.js
React
GraphQL
Prisma
AWS

What you will learn!

  • Using Next.js App Router

  • Automating Data Fetching with GraphQL and TanStack Query

  • Efficient GraphQL Workflow Automation Using CLI

  • Database Management with PostgreSQL and Prisma

  • Using TanStack Query (React Query)

  • React Hook Form and Data Validation

  • State management with Zustand

  • Data caching with Redis

  • Building a message queue system with RabbitMQ

  • Automating Environment Configuration with Docker Compose

  • UI/UX Design with TailwindCSS and Shadcn

  • Test Automation with Cypress

  • UI Component Documentation Using Storybook

  • AWS Presigned URL

  • Session Management with Iron Session

  • Session Management with Redis

Next.js course focused on practice with various examples 🚀

This course is not just a theory course. It is a practical course where you can learn all about the latest web technologies through examples that can be applied directly to real projects .

  • Based on Next.js and React , we utilize various practical technology stacks such as GraphQL, Prisma, TanStack Query, Redis, and RabbitMQ.

  • All the heavy lifting is automated! Use our CLI tool to set up a set of GraphQL resolvers and API integrations in seconds.

  • Experience everything from setting up a development environment using Docker Compose to cloud deployment using AWS.

  • It comprehensively covers the core elements of web services , including real-time data processing, session management (Iron Session), SSR, and SEO optimization.

If you are tired of simple tutorials, try implementing production-ready functions based on various examples to get a practical feel. After learning, you will be able to confidently handle an all-rounder technology stack that can be used right away in your startup!

  • 💡 This course focuses on learning the technology stack and workflow required in a startup environment for projects based on Next.js (15+) and React (19) . In particular, it provides various technologies and efficient development methods that can be immediately applied in practice.

    • Planning Background
      In a startup environment, you need to quickly build a product that is suitable for production. This course covers automation through CLI tools , integration of GraphQL and TanStack Query , and real-time data processing with Redis and RabbitMQ to meet these needs.
      It is designed so that even complex skills can be learned step by step through simple and clear exercises.

    • Tools and techniques used
      We utilize various practical stacks such as Next.js (15+), React (19), Prisma, Docker Compose, GraphQL, TanStack Query, Redis, RabbitMQ, Iron Session, etc.

    • Balance between theory and practice
      This course is not a simple theory course. It is designed to help you easily implement functions that can be used in actual production , and to help you learn core keywords so that you can confidently use them in practice.

      Nowadays, AI tools like ChatGPT can help you improve complex tasks using only keywords you already know. Therefore, this course focuses on figuring out what you don't know and learning the keywords you need .
      The knowledge and projects you gain through lectures will be at a level that is sufficiently competitive in the field, and you will be able to obtain results that are comparable to those you create in your own products .

    • Difficulty
      This course is intended for intermediate or higher level learners with basic knowledge of React and TypeScript.
      However, we have structured it so that you can understand it by following the step-by-step examples even if you do not have any practical experience.

Features of this course

📌 Learn a technology stack that can be immediately applied in practice through various examples.
We share technologies and workflows that can maximize the efficiency and productivity required in a startup environment.

📌 Maximize automation and productivity using CLI.
Automatically generates a set of GraphQL resolvers and API integrations, and helps you easily maintain a code structure that follows conventions.

📌 20% theory, 80% practice.
I write all the code myself, focusing on production-level projects, and verifying that it works as expected.

📌 A configuration that can be used immediately in actual services.
Based on Next.js (15+) and React (19), you will learn technologies widely used in startups and practice, such as Redis, RabbitMQ, Prisma, and Docker Compose.

📌 This course is for intermediate learners.
You need to understand basic React and TypeScript. It's not hard to advance. I'll help you realize "what you don't know."

Learn about these things.

1. Lecture Introduction
We present practical projects using Next.js and the latest technology stack. We explain the objectives of the course and the core values that learners can obtain.

2. Environment configuration
Learn how to use Docker Compose to set up an integrated development environment and learn a project structure that can improve teamwork and productivity.

3. Prisma and Data Management
You will learn how to set up a database using Prisma, manage data with npx prisma studio , and learn data update and visualization techniques frequently used in practice.

4. GraphQL Queries, Mutations, and Real-Time Data
Automatically generate GraphQL resolvers with CLI, write queries and mutations, implement transactions and data integration, and cover real-time data processing using subscriptions.

5. React Hook Form Example
Manage and validate form data using React Hook Form, automate validation with integration with Zod, and maximize form processing efficiency.

6. Status management using Zustand
Learn a lightweight and simple state management approach using Zustand, and learn how to efficiently manage global state using it in practice.

7. TanStack Query Example
Learn how to efficiently handle server state management in React applications. Covers advanced features like useQuery , useMutation , Pagination , and Optimistic Update .

8. Implementing CRUD functions
We will learn how to implement Create, Read, Update, and Delete step by step using Prisma, GraphQL, and TanStack Query, and how to utilize them in practice.

9. Redis and RabbitMQ Practice
We will cover the basics of building a data caching system using Redis and a message queue system using RabbitMQ.

10. Session Management: Authentication using Iron Session and Redis
We cover client-side session maintenance using cookie-based Iron Session and server-side session management using server-centric Redis.

11. Next.js + Prometheus + Grafana: Easy and Fast Monitoring
Learn how to collect and visualize metrics using Prometheus and Grafana. Learn how to build an environment with Docker containers and monitor data by linking Prometheus and Grafana. Also, perform a simple API load test using JMeter.

12. Presigned URL and CloudFront Integration
We will cover secure file upload and access using Presigned URLs. We will proceed with S3 bucket setup, user group management, policy and CORS setup, and link GoDaddy domain with AWS Route 53. We will also practice issuing SSL certificates, linking with CloudFront, setting up subdomains, caching strategies, and cache invalidation processing.

13. Bonus: Storybook & E2E Testing
Learn how to document and test UI components using Storybook, and practice E2E testing using Cypress.

Things to note before taking the class

Practice environment


The course will be conducted in a Windows environment , but you can follow along without any problems on MacOS or Linux. If you have Docker installed, you can perform most of the exercises regardless of the operating system.

Please prepare the following for the lecture:

  • Docker : Docker is required to set up a development environment. Please refer to the official documentation for installation instructions.

  • Code Editor :

    • Cursor AI : The best recommended tool for coding assistance and quick problem solving. It is the most recommended code editor in this course, especially because it can maximize productivity.

    • Visual Studio Code (VS Code) : If you don't have Cursor AI, you can follow the lecture content without any difficulty using VS Code.

  • LLM Services (ChatGPT, Claude, etc.) : I highly recommend subscribing to one or more LLM services to help you write code and troubleshoot problems during your internship.

Learning Materials

  • The basic project is provided with the lecture and is shared through GitHub link. You can download the necessary materials and use them for practice. 😊

Player Knowledge and Notes
This course is designed for intermediate developers and recommends the following prerequisite knowledge for smooth learning:

  • Understanding basic JavaScript and TypeScript

    • If you have experience using ES6+ syntax and basic TypeScript, learning will be easy.

  • Basic experience using React

    • If you are familiar with component structure, Props, and basic Hooks, you will find it easier to follow the exercises.

  • GraphQL Basic Knowledge

    • If you know the basic query and mutation structures of GraphQL, you can maximize the learning effect.

  • Basic knowledge of SQL and databases

    • If you understand how to write basic SQL queries and how databases work, you can easily learn how to integrate Prisma with GraphQL.

  • Docker installation and simple usage experience

    • Since it includes setting up a development environment using Docker Compose, please be familiar with Docker installation and basic usage.

  • Experience using coding assistance tools (Large Language Model, LLM) (optional)

    • If you have experience using AI tools like ChatGPT, Claude, or Cursor AI, you will find that problem-solving and hands-on progress will be faster and more effective.

Recommended for
these people

Who is this course right for?

  • Those who want to complete a real-world project using Next.js and React.

  • Those who want to learn a tech stack suitable for a startup environment.

  • Those who want to automate repetitive tasks and increase productivity

  • Those who want to experience cloud deployment.

  • Someone who wants to become an all-rounder developer encompassing both server and client development.

  • Those who want to learn skills that can be immediately applied in practice.

Need to know before starting?

  • Basic knowledge of HTML and CSS

  • Understanding basic JavaScript syntax.

  • React Fundamentals

  • Next.js basic knowledge

  • Basic TypeScript Understanding

Hello
This is

462

Learners

19

Reviews

8

Answers

4.1

Rating

7

Courses

안녕하세요, 주식회사 럿지의 대표입니다.


저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,

개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.

 

이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.


특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.

 

완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.

Curriculum

All

56 lectures ∙ (3hr 49min)

Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

$13.20

ludgi's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!