Next.js in your hands - Creating a blog
hajoeun
Get familiar with Next.js by creating a personal blog with Next.js!
초급
Next.js, React, Blog
BEST
Getting Started with Next.js - A Quick Look at the Official Documentation
Learn the latest Next.js with the official documentation. Understand why Next.js is needed as a problem-solving tool!
Reviews from Early Learners
What you will learn!
Understanding the Need for Next.js as a Problem Solving Tool
Learn and get familiar with the basic concepts of Next.js and App Router.
A sneak peek at the server components (RSC) introduced in React 18
Studying with Carrot Engineer
Next.js 13! 💡
If you're a front-end developer, Next.js
Next.js is a powerful tool for building and deploying web apps.
Next.js, which enables the quick and efficient building of web apps, is currently actively used by companies such as Netflix, Nike, and TikTok.
Hello! This is Ha Jo-eun 👋
After working at Maple and Banksalad, I am currently working as a front-end engineer at Carrot.
Front-end engineers often feel overwhelmed by the new technologies being introduced every day . Perhaps you're also feeling the pressure of Next.js. This pressure has likely increased with the recent release of Next.js 13, which incorporates the latest features of React 18.
I was like that too. I'd used Next.js before, but I didn't understand the new concepts.
I created this course after making a determined effort to understand a new technology. You probably know that you learn the most when you teach. I prepared this course with the mindset of learning and sharing what I learned. Through this course, I hope to convey the following values to you.
- 1️⃣ Let me tell you why you should learn Next.js among many frameworks.
- I hope you'll gain some wisdom that will serve as a good guideline when choosing new tools as a front-end engineer in the future.
- 2️⃣ We will go over the key concepts you need to know in Next.js version 13.
- As we look at the new routing system, App Router, server components, data fetching, caching, and revalidating, I hope you'll think, "It's not that hard after all."
- 3️⃣ Apply the core concepts you learned while creating an app .
- I hope that you will make mistakes and encounter errors during this process, and gain valuable information that will be useful in practice.
I made this with this person in mind 💁♂️
😢 Next.js... I'm the only one who doesn't know
I'm learning React and using it in my work, but I haven't properly learned Next.js yet. Everyone talks about it, but I feel like I'm the only one who doesn't know about it, so I'm worried.
📌 Just because others are talking about a new technology doesn't mean you have to learn it. It's never too late to learn when you really need it. However, if you're looking to discuss Next.js with fellow developers, my course will be helpful!
😵💫 It's hard to even look at the official documentation
I've been trying to learn Next.js version 13, but I still don't understand the official documentation. I'd appreciate it if someone could summarize the key points from the official documentation so we can study together.
📌 While the official documentation is certainly a valuable learning resource, its sheer volume can be overwhelming. Wouldn't it be more efficient and time-efficient to have an experienced instructor point out the areas you need to learn? This lecture summarizes key concepts based on the official Next.js documentation.
🤔 How should I actually write it?
I followed the official documentation, but it doesn't work as expected. I don't know what's wrong. I searched, but it's hard to find a good result, perhaps because Next.js 13 was released so recently.
📌 When following the code in the official documentation, you'll often encounter situations where it doesn't work as expected. I've been flustered a few times while preparing for this lecture. In this lecture, I'll share actual, working code.
What you'll gain from this course 💎
1. The perspective on technology is changing.
Like many technologies, I believe Next.js emerged to solve a problem. In this lecture, I want to convey the core concepts and explain what each tool means.
- Understand how JavaScript frameworks have evolved to bring Next.js to the world.
- You can see why Next.js is a worthwhile tool to learn as a problem-solving tool.
2. You will have study materials available to you at any time.
I believe a good lecture stays in your head for a long time. However, our memories are limited. I want to provide practical help by providing a handbook and source code that you can access whenever you need it.
- We provide a handbook that summarizes only the core concepts from the official Next.js documentation.
- We provide the source code for the project we created together in class.
- We'll answer your questions as quickly as possible. As our enrollment grows, we'll be running a separate channel.
What will you learn? 📚
It consists of three sections in total.
Section 1.
Why learn Next.js?
Let's take a look at what happened before Next.js came into existence. We've prepared a time to understand the challenges that tools like jQuery, AngularJS, and React were trying to solve, starting with the emergence of JavaScript. Naturally, you'll learn the background that led to the emergence of Next.js!
Section 2
Learning the Basics of Next.js
We've distilled the essentials from the official Next.js documentation. You'll learn what Next.js is and what's new in Next.js 13. You'll understand the newly introduced server component, file system-based routing, data fetching, and metadata!
.png?w=960)
Section 3.
Getting familiar with Next.js
This is the process of putting what you learned in the previous chapter into actual code. By building a weather app, you'll be able to put concepts you've only ever had in your head into practice. You'll directly call the weather API and learn how to fetch, cache, and revalidate data, all while getting hands-on with Next.js!
.png?w=960)
Please note 📢
Let me introduce you to the practice environment and learning materials! I used a MacBook Air M1 with 8GB of memory .
Practice environment
- Operating System and Environment: macOS, Node.js 18.17.0
- Tools used: VSCode
- Services used: Vercel , WeatherAPI , TimeAPI
Learning Materials
- A handbook that receives feedback and is constantly updated
- Source code of the weather app we created together
Before attending the lecture
- I recommend that you first listen to the lectures that are available for free.
- Watching the presentation on clean code given at Banksalad will also help you understand the lecture style.
Recommended for
these people
Who is this course right for?
For those who want to understand the main concepts of Next.js
For those who want to try out React's latest features
For those who are having trouble choosing a JavaScript framework
Need to know before starting?
HTML & CSS
JavaScript
React
TypeScript
1,058
Learners
80
Reviews
45
Answers
4.8
Rating
3
Courses
마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.
"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.
Curriculum
All
22 lectures ∙ (1hr 54min)
1. Intro: Hello
05:06
3. What is Next.js?
04:23
4. Next.js 13
02:30
5. Server Component
06:08
6. Routing
05:01
8. Styling
03:30
9. Data Fetching
06:44
10. Metadata
03:05
Published:
Last updated:
Reviews
All
68 reviews
4.9
68 reviews
- petercha900526
Reviews 8
∙
Average Rating 4.6
5
45% enrolledThis is a lecture that makes me think, "If I had started with this lecture when I was learning Next.js, it would have been much less frustrating..!" I knew the lecturer from his external lectures and YouTube videos, but I listened to this lecture because he said he would do it. After listening to the lecture, I felt that it covered the shortcomings of the learning method that I had learned only by focusing on practical work, such as not reading the official documentation properly and only learning by doing this and then this function! It was easy to listen to because it felt like a kind senior from school was talking right next to me, and I thought 'use client' was CSR, but he immediately explained that it wasn't, and I felt like it was a good lecture that solidified the basics by filling in the points that people tend to overlook.
milkteaReviews 26
∙
Average Rating 4.8
5
91% enrolledI am a junior developer with less than 1 year of experience. I suddenly started working as a freelance developer. Since it was a Next 13-based project, I was assigned to it after watching this lecture. The essential parts that I absolutely must know were explained well based on the official documentation, and the answers to questions were not vague but clear and detailed, so when I looked through the answers given to the students, I felt like I was looking at a separate appendix to the lecture. I felt that they were sincerely helping me fill my lack of confidence with knowledge. As a thank you, I have nothing but this insignificant review. This review is not related to the lecture, but. If you have time, I recommend that prospective/junior developers take a look at the instructor's blog posting. It seems like he has collected and written down the foggy worries that we as developers have, and as you read, you will think about what kind of developer you will become, and you can indirectly experience the process of the company and I choosing each other through the writing. It is fun, and as you read, you empathize and become profound(?). Just by reading the article, you can see that you are a good developer. I am really grateful that you made me question myself, who used to blame myself by just looking at titles like Nekaraku Baedangto. I set a goal to become a developer like Hajo Eun who knows how to reflect on herself and define her own situation and abilities through her writing. You are a good teacher.
- hoho952791
Reviews 6
∙
Average Rating 4.3
- seaweeddragonvic3619
Reviews 1
∙
Average Rating 5.0
5
32% enrolledWhen I first started learning next.js, I had a hard time understanding what was being said even when I looked at the official documentation, but it was really helpful that you explained the key points concisely. I have taken many classes at Inflearn, but this is my first time leaving a comment. I hope you will continue to provide great lectures in the future.
- stu
Reviews 15
∙
Average Rating 4.9
Limited time deal
$15.40
22%
$19.80
hajoeun's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![[JavaScript GUI Development #1] Timer App with Electron + React (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
![[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
![[Revised 3rd Edition] Node.js Textbook - From Basics to Project Practice강의 썸네일](https://cdn.inflearn.com/public/courses/330181/cover/47e0125e-75ad-4946-96d3-54bbc444a188/330181-eng.jpg?f=avif&w=420)
![[Code Factory] [Beginner] NestJS REST API Backend Complete Conquest Master Class - NestJS Core강의 썸네일](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
