A course on Next.js fundamentals. Develop a map service end-to-end with Next.js.
907 learners
Level Basic
Course period Unlimited
Course 추천하고 성장과 수익을 만들어 보세요!
Marketing Partners
Course 추천하고 성장과 수익을 만들어 보세요!
Reviews from Early Learners
5.0
김효신
The lecture time seems short at 4 hours, but in reality, it takes longer to study because the time to actually type code is not included (it is shown by fast-forwarding or explaining by showing the code that has already been created). But I actually like that! Haha. The lecture cuts down on unnecessary parts and only teaches the key points, so it is good for self-study. Thank you for making such a great lecture.
5.0
콩팥팥죽
One-line review: I paid without much expectation, but I felt that this lecture was good Reason for payment: I paid for another lecture, but I didn't have time because of work. The new one is conducted in a modern browser environment, so when the time came, I watched the existing paid lecture, but it was too long and boring, so I looked for a short one and paid after looking at the table of contents Good points 1. I studied deeply by opening the browser and debugging, and it taught me the principles (I was able to study deeply, not just implement simple things) 2. It focuses on next.js without unnecessary explanations (scss, css.module, react, cache background knowledge, etc.) 3. The teaching method was good While checking out the branch, it only removes comments, shows various comparisons, and shows the differences and how to use them efficiently (It explained the differences and how to use them without unnecessary details) 4. The price is a good deal I think this price is a great deal for this level of quality. 5. The answers to questions are very detailed They took this much time to answer? It felt like that 6. Tailwind is not used X It was so inconvenient to memorize styles for styling and style HTML tags, but fortunately. 7. The official documentation was also reviewed, so the cost of having to look at it myself was reduced 8. I was frustrated because I didn't know much about SEO, but I was able to learn it more easily than I thought, and the summary was very good 9. I learned why I should write HTML code that considers web accessibility Personally, what I would like to see added 1. When using next.js with monorepo in vscode, it would be great if you could also tell me about debugging settings, because it's not easy. (By debugging settings, I mean breakpoints. Monorepo debugging settings are not listed in the official next.js documentation.)
5.0
JC
It was a great help in understanding how Next.js works, as you explained the rendering method by looking into the files that Next.js actually generated. Also, by showing you the process of creating a map page in detail, I was able to get a lot of information about the various libraries used during the process and small development tips. When you have some basic knowledge of React, taking this course will be a great help in getting to the stage where you can create a practical website yourself!
Next.js Basic Structure and Various APIs
Next.js Map Web Service Build
Next.js project deployment, search engine registration, various optimizations
Next.js for leading FE developers!
Creating a store map service that's easy and fun.
✅
If you want to look at the code of a web service created with Next.js,
✅
If you want to know the process of completing a web service from start to finish with front-end technology without back-end code,
✅
If you are curious about various optimization methods such as SSR/SSG/CSR,
This course is for front-end developers at the beginner/beginner level of Next.js.
You can learn all the essential Next.js functions and APIs by easily developing a map service using various APIs supported by Next.js without any backend code.
Next.js is a React framework that offers a superior developer experience, a simple and intuitive API, and a variety of optimizations. It supports SSR/SSG/CSR methods, and also supports optimization features designed for developer convenience.
Having worked on several projects with Next.js, I've noticed its strengths. I'd like to introduce Next.js, which is expected to see even more rapid growth in the front-end market.
From A to Z with map service
By building a map service, you'll learn all the essential Next.js functionality and APIs necessary for development. By learning APIs like next/link and next/image, which are included in both Next.js 12 and Next.js 13, you'll understand the advantages of v13.
Improve your front-end development skills
As you follow the lectures, you will learn the basic concepts that a front-end developer needs to know, such as UI development (HTML/CSS), web performance and accessibility, deployment, and search engine registration.
Lectures with the learner in mind
We provide source code for each class, organized into separate branches, to facilitate the course. We also provide subtitles for all video lectures to ensure you can follow along with the content.
The lecture will be updated
We'll be adding more information where it's needed. We'll also be updating the course with news related to Next.js 13.
👉 Preview the map project created in the lecture (link)
Section 0: Setting up the development environment
Section 1: Understanding Data Fetching
Section 2: Creating the Header UI
Section 3: Creating a Map UI
Section 4: Creating a Store Details Page
Section 5: Testing Web Performance with Lighthouse
Section 6: Deploying with Vercel
Section 7: Project Wrap-up
Section 8~: Questions and Answers and Reinforcement
We'll share tips we've learned while developing services and products with Next.js.
As a front-end leader at a startup for four years, I developed the main product and website with Next.js. I also developed a web game service using Next.js, winning third place in the JUNCTION ASIA 2022 Track, and a web service utilizing the Next.js T3 Stack won second place at the KAIST SPARCS HACKATHON. I'd like to share the advantages and know-how I've gained from working on projects with Next.js with more people. 🙂
Q. Why should I learn Next.js?
Among existing front-end development frameworks, I believe Next.js offers a superior developer experience, an intuitive API, and support for various optimizations. While previous frameworks required weighing the pros and cons of various technologies, Next.js pursues a path of extracting only their strengths and presenting them through an API. Furthermore, its continuous updates will ensure its adoption in ever-increasing applications.
Q. How difficult is the course?
This course is designed to introduce you to Next.js, and you'll follow the source code, videos, and subtitles to naturally complete the project. Each course provides separate branches, allowing you to skip ahead or return to sections based on your skill level. Basic knowledge of React (JSX syntax, useState/useEffect hooks, etc.) is required.
If you are new to Next.js, we recommend starting with the following steps:
Q. Besides Next.js, what other libraries do you use in class?
We use TypeScript, ESlint/Prettier, SWR, next-seo, next-sitemap, Sass (scss), react-icons, copy-to-clipboard, @types/navermaps, and firebase (Cloud Firestore). Excluding the core libraries (TypeScript and scss), we use only the bare minimum necessary to implement the service. We do not use any additional UI libraries or CSS-in-JS.
💾 Things to note before taking the class
Who is this course right for?
Those who want to learn Next.js
Those wanting to see the full web service development process.
People who want to try making a map service
Need to know before starting?
React(jsx syntax, useState/useEffect usage)
git usage
yarn(or npm) usage
TypeScript Syntax
1,043
Learners
50
Reviews
87
Answers
4.5
Rating
2
Courses
Hello.
I have been working as a front-end developer at a startup for 4 years.
I work with React, Next.js, maps, charts, and UI libraries.
All
45 lectures ∙ (4hr 7min)
Course Materials:
All
46 reviews
4.5
46 reviews
Reviews 1
∙
Average Rating 5.0
Reviews 1
∙
Average Rating 5.0
Reviews 6
∙
Average Rating 5.0
Reviews 24
∙
Average Rating 4.3
5
One-line review: I paid without much expectation, but I felt that this lecture was good Reason for payment: I paid for another lecture, but I didn't have time because of work. The new one is conducted in a modern browser environment, so when the time came, I watched the existing paid lecture, but it was too long and boring, so I looked for a short one and paid after looking at the table of contents Good points 1. I studied deeply by opening the browser and debugging, and it taught me the principles (I was able to study deeply, not just implement simple things) 2. It focuses on next.js without unnecessary explanations (scss, css.module, react, cache background knowledge, etc.) 3. The teaching method was good While checking out the branch, it only removes comments, shows various comparisons, and shows the differences and how to use them efficiently (It explained the differences and how to use them without unnecessary details) 4. The price is a good deal I think this price is a great deal for this level of quality. 5. The answers to questions are very detailed They took this much time to answer? It felt like that 6. Tailwind is not used X It was so inconvenient to memorize styles for styling and style HTML tags, but fortunately. 7. The official documentation was also reviewed, so the cost of having to look at it myself was reduced 8. I was frustrated because I didn't know much about SEO, but I was able to learn it more easily than I thought, and the summary was very good 9. I learned why I should write HTML code that considers web accessibility Personally, what I would like to see added 1. When using next.js with monorepo in vscode, it would be great if you could also tell me about debugging settings, because it's not easy. (By debugging settings, I mean breakpoints. Monorepo debugging settings are not listed in the official next.js documentation.)
Reviews 1
∙
Average Rating 5.0
5
This is a really great lecture. Based on the document, the features of Next are thoroughly explained from the beginning. Thanks to this, I was able to clearly understand the concepts that were ambiguous after reading the English document roughly. I think I will be able to develop by making good use of the features and advantages of SSR in the future. It was even better because it explained everything from development to distribution, how to register with search engines, SEO, and optimization all at once. I look forward to the layout concept of Next@13 being included in an additional lecture!!
Check out other courses by the instructor!
Explore other courses in the same field!
$34.10
![[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?w=420)
![[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)Course Thumbnail](https://cdn.inflearn.com/public/courses/332907/cover/2975d3d7-5dcc-4e2a-977c-98b11134cfb6/332907.jpg?w=420)
