Frontend Development Kick, Web API (feat. React)
vroomfan
We cover Web APIs for practical application. We hope you gain the tools to resolve requirements you're bound to encounter.
Basic
JavaScript, React, Web API
BEST
Getting Started with Next.js (feat. Map Service Development)
A course on Next.js fundamentals. Develop a map service end-to-end with Next.js.
Reviews from Early Learners
What you will learn!
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.
From map service creation to distribution and optimization
Getting started with Next.js all in one go
✅
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,
If you are a front-end developer who wants to learn Next.js!
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.
Now, why Next.js?
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.
Reduce the learning burden,
The concept is more clear.
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.
10 Things You Need to Know About the Next.js API While Building a Store Map Service ✅
- Go to the map page/feedback page with next/link
- Optimize your logo image/store image with next/image
- Loading map scripts with next/script
- Retrieving store data with API Routes
- Pre-rendering map pages with getStaticProps
- Pre-rendering dynamic routes for all stores with getStaticPaths
- Retrieving feedback page data from getServerSideProps
- API differences between Next.js 12 and 13, such as next/link and next/image.
- Test web performance and improve web accessibility and SEO with Lighthouse.
- Deploying Next.js Projects via Vercel
Learning Curriculum 📚
👉 Preview the map project created in the lecture (link)
Section 0: Setting up the development environment
- Before learning the actual content, we will go through the basic settings of Next.js.
- Start a project with create-next-app and set up eslint and prettier.
Section 1: Understanding Data Fetching
- Learn various data-fetching techniques in Next.js (SSR/SSG/CSR).
- Understand the principles of page transition optimization in Next.js through the next build output and the network tab in the developer tools.
- Learn next/link and next/router.
Section 2: Creating the Header UI
- Learn the next/image API to load logo images.
- Learn about the capacity optimizations and features of Next.js 13 next/image and Next.js 12 next/legacy/image.
- Based on what you learned in Section 1, we will route the map page and feedback page.
Section 3: Creating a Map UI
- Learn the next/script API to load map scripts.
- Learn how to store state in a URL using next/router.
- Draw a marker icon with a sprite marker image.
- Handle click events for map and marker.
- Manage your store data globally with ease using SWR.
Section 4: Creating a Store Details Page
- Create dynamic routes for store detail pages and learn how to use the getStaticPaths API.
- Implement store detail UI.
- Connect the store details page and the map page using next/router.
Section 5: Testing Web Performance with Lighthouse
- Test web performance with Chrome Lighthouse.
- Improve web performance, web accessibility, and SEO.
- Fill the HTML head using the _document or next-seo library.
Section 6: Deploying with Vercel
- Deploy the completed website to Vercel.
- Generate robots.txt and sitemap.xml files using the next-sitemap library.
- Register your site with Naver Search Advisor and Google Search Console.
- We use Google Analytics.
Section 7: Project Wrap-up
- Create a GET API that responds with store data using Next.js API Routes.
- The Feedback page explains how to read and write data to Firebase Cloud Firestore.
- We are finishing up the project to create a map service.
Section 8~: Questions and Answers and Reinforcement
- We provide supplementary lectures when additional explanations are needed or important questions arise during the lecture.
- We'll be adding more details when Next.js 13 becomes available.
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&A 💭
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:
- Learn the overall flow by looking at the lecture and the provided code.
- Change and improve the code in your own way.
- Complete your own Next.js project.
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
- The lecture is based on Next.js version 13.0.7 and pages directory.
- Theory and practice are taught in a 1:2 ratio. The practical portion will briefly cover simple UI implementations, focusing on Next.js concepts learned in theory.
- We use JetBrains' WebStorm IDE and Yarn as our package manager. If you encounter any difficulties using VSCode or npm, please contact us.
- Since this is a lecture on Next.js, a React Framework , prior knowledge of React is required (jsx syntax, useState/useEffect hooks, etc.)
- We use scss. We do not use CSS-in-JS libraries (emotion, styled-components).
- In addition to React and yarn (npm), basic knowledge of TypeScript and Git is required.
- We use SWR as our state management library (the same one developed by the Vercel team as Next.js). To minimize learning curve, we use it only for minimal global state storage.
- We provide the full source code, including branches for each class. We recommend following along with the video, focusing on the provided source code. (We discourage copying the code exactly as it appears on the screen.) Additionally, referencing the official Next.js documentation can be helpful.
- In addition to answering questions, we will update supplementary videos when we deem necessary.
Recommended for
these people
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,020
Learners
48
Reviews
87
Answers
4.5
Rating
2
Courses
안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.
Curriculum
All
45 lectures ∙ (4hr 7min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
46 reviews
4.5
46 reviews
dkfmwpsxmReviews 24
∙
Average Rating 4.8
5
100% enrolledOne-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.)
- syda071337
Reviews 1
∙
Average Rating 5.0
5
100% enrolledThis 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!!
- rhwkd50127644
Reviews 1
∙
Average Rating 5.0
- shan
Reviews 1
∙
Average Rating 5.0
- tlsgkdals713087
Reviews 6
∙
Average Rating 5.0
$34.10
vroomfan's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
