BEST

Bite-sized Next.js

The 3rd installment of the "One Bite" series! This is the world's most friendly and detailed Next.js course. We will explore not only the App Router but also the Page Router through hands-on projects.

(5.0) 599 reviews

5,658 learners

Level Basic

Course period Unlimited

winterlood

React

TypeScript

Next.js

React

TypeScript

Next.js

News list

winterlood

･

Edited

One-bite patch note) Announcement of lecture updates related to Next.js 15

Hello, Hanip Next students, this is Lee Jeong-hwan.

On October 21, 2024, Next.js version 15 was finally officially released 🎉

Official documentation link for Next 15: https://nextjs.org/blog/next-15

Because our lecture was created based on version 15 RC (15.0.0-rc.0).

There isn't much difference from the currently released 15 latest version.

However, since there are some differences from the existing lecture content, we are sending you this information.

Functionality change) searchParams and params are now provided asynchronously.

Students who took the Next 15 RC version before October 21, 2024
You may have used searchParams and params synchronously like this:

// searchParams 꺼내오기 export default async function Page({ searchParams, }: { searchParams: { q: string }; }) { const { q } = searchParams; return {q}

; } // Get params export default async function Page({ params, }: { params: { id: string }; }) { const { id } = params; return

{id}

; }

However, starting with the Next 15 (latest) version that was officially released on the 21st, searchParams and params are said to be provided asynchronously. Therefore, from now on, you must set up async and await to retrieve values as follows. Some chapters have been re-recorded in the lecture to reflect this content.

// searchParams 꺼내오기 export default async function Page({ searchParams, }: { searchParams: Promise<{ q: string }>; }) { const { q } = await searchParams; return {q}

; } // Get params export default async function Page({ params, }: { params: Promise<{ id: string }>; }) { const { id } = await params; return

{id}

; }

In addition, data that depends on requests from browsers, such as cookies and headers, will all be provided asynchronously in the future. Although cookies and headers were not covered in our lecture, they are functions that you will likely use in your future personal projects, so it would be good to know about them. Here are links to related articles.

https://nextjs.org/blog/next-15#async-request-apis-breaking-change

(Course Update) The lecture has been revised to reflect the above changes.

To reflect the above changes, some chapters (video clips) have been re-recorded and updated.
Here is a guide to the changes by chapter. You may want to refer to it and check some sections again . 😃

3.1) Starting the AppRouter

Changed time: Footage between 02 minutes 26 seconds and 04 minutes 29 seconds has been corrected.

Change: Creating a new Next.js app no longer uses the RC version. This has caused the app creation command to change from craete-next-app@rc to create-next-app@latest .

3.2) Setting up page routing

Change time: 06 minutes 16 seconds ~ until the end

Changes: searchParams and params are now provided asynchronously. This has changed the way we handle searchParams and params in the lessons.

7.2) Implementing the Add Review feature

Change time: 14 minutes 57 seconds ~ 16 minutes 57 seconds

Changes: Starting with Next 15, messages that were previously displayed as simple warnings on the console will now appear as overlays. To address the inconvenience caused by this during practice, instructions on how to resolve errors have been added.

9.2) Search Engine Optimization

Change time: 07 minutes 18 seconds ~ until the end

Changed: searchParams and params are now provided asynchronously. Therefore, the way searchParams and params are handled in the generateMetadat function has also changed.

In conclusion

Lastly, we would like to thank you all for your love and interest in Next.js.

We will continue to work hard to repay your interest 🙇‍♂

The weather is quite cold, but we bring you news with a warm heart.

Thank you always.

Lee Jung-hwan's dream

Comment