- 10 common mistakes with the Next.js App Router

10 common mistakes with the Next.js App Router

After talking to hundreds of developers and looking at thousands of Next.js repositories, I've noticed ten common mistakes when building with the Next.js App Router.

This video will share why these mistakes can happen, how to fix them, and some tips to help you understand the new App Router mode...
After talking to hundreds of developers and looking at thousands of Next.js repositories, I've noticed ten common mistakes when building with the Next.js App Router.

This video will share why these mistakes can happen, how to fix them, and some tips to help you understand the new App Router model.

0:00 – Introduction
0:13 – Calling Route Handlers from Server Components
1:59 – Static or dynamic Route Handlers
7:00 – Route Handlers and Client Components
9:03 – Using Suspense with Server Components
12:35– Using the incoming request
13:59 – Using Context providers with App Router
15:10 – Using Server and Client Components together
15:41 – Adding “use client” unnecessarily
17:51 – Not revalidating data after mutations
19:11 – Redirects inside of try/catch blocks

https://vercel.com/blog/common-mistakes-with-the-next-js-app-router-and-how-to-fix-them

#nextjs #react
– Introduction - 10 common mistakes with the Next.js App Router

– Introduction

10 common mistakes with the Next.js App Router
2024年01月09日 
00:00:00 - 00:00:13
– Calling Route Handlers from Server Components - 10 common mistakes with the Next.js App Router

– Calling Route Handlers from Server Components

10 common mistakes with the Next.js App Router
2024年01月09日 
00:00:13 - 00:01:59
– Static or dynamic Route Handlers - 10 common mistakes with the Next.js App Router

– Static or dynamic Route Handlers

10 common mistakes with the Next.js App Router
2024年01月09日 
00:01:59 - 00:07:00
– Route Handlers and Client Components - 10 common mistakes with the Next.js App Router

– Route Handlers and Client Components

10 common mistakes with the Next.js App Router
2024年01月09日 
00:07:00 - 00:09:03
as you say putting an action like that simplify a lot of things but I think it lacks of "client side validation". I am pretty new to web development but when I try to use an action I always go like: create an handleSubmit function, check user input in that function, call action according to that validation. Is client side validation not that necessary? Or can we send feedback to user from that action? - 10 common mistakes with the Next.js App Router

as you say putting an action like that simplify a lot of things but I think it lacks of "client side validation". I am pretty new to web development but when I try to use an action I always go like: create an handleSubmit function, check user input in that function, call action according to that validation. Is client side validation not that necessary? Or can we send feedback to user from that action?

10 common mistakes with the Next.js App Router
2024年01月09日  @serkan_bayram 様 
00:08:31 - 00:20:37
– Using Suspense with Server Components - 10 common mistakes with the Next.js App Router

– Using Suspense with Server Components

10 common mistakes with the Next.js App Router
2024年01月09日 
00:09:03 - 00:12:35
On  how did you do that thing where the import appears at the bottom of your position? (unstable_noStore) - 10 common mistakes with the Next.js App Router

On how did you do that thing where the import appears at the bottom of your position? (unstable_noStore)

10 common mistakes with the Next.js App Router
2024年01月09日  @anargyrosstylidis2595 様 
00:12:03 - 00:20:37
, you said: "This flicker means this bit should not be cached. It should be run dynamically." Why does the flicker indicate that? 🤔 - 10 common mistakes with the Next.js App Router

, you said: "This flicker means this bit should not be cached. It should be run dynamically." Why does the flicker indicate that? 🤔

10 common mistakes with the Next.js App Router
2024年01月09日  @tonytrinh 様 
00:12:10 - 00:20:37
Thank you Lee, definetly need a video on suspense . - 10 common mistakes with the Next.js App Router

Thank you Lee, definetly need a video on suspense .

10 common mistakes with the Next.js App Router
2024年01月09日  @faizanahmed9304 様 
00:12:32 - 00:20:37
– Using the incoming request - 10 common mistakes with the Next.js App Router

– Using the incoming request

10 common mistakes with the Next.js App Router
2024年01月09日 
00:12:35 - 00:13:59
– Using Context providers with App Router - 10 common mistakes with the Next.js App Router

– Using Context providers with App Router

10 common mistakes with the Next.js App Router
2024年01月09日 
00:13:59 - 00:15:10
– Using Server and Client Components together - 10 common mistakes with the Next.js App Router

– Using Server and Client Components together

10 common mistakes with the Next.js App Router
2024年01月09日 
00:15:10 - 00:15:41
– Adding “use client” unnecessarily - 10 common mistakes with the Next.js App Router

– Adding “use client” unnecessarily

10 common mistakes with the Next.js App Router
2024年01月09日 
00:15:41 - 00:17:51
I'm a bit confused... you first mentioned how AnotherButton doesn't need 'use client' because it's already within the client boundary of the first button.  so then why when you add children are they not also within the client boundary? - 10 common mistakes with the Next.js App Router

I'm a bit confused... you first mentioned how AnotherButton doesn't need 'use client' because it's already within the client boundary of the first button. so then why when you add children are they not also within the client boundary?

10 common mistakes with the Next.js App Router
2024年01月09日  @neilmerchant2796 様 
00:17:18 - 00:20:37
At  you passed a server component as a child of client component. What if server component requires some props to be passed in, and in client component I am doing some calculations ( which could be only happen in client component) and what’s to pass the result of that calculation as a prop in server component, then how can we do this? - 10 common mistakes with the Next.js App Router

At you passed a server component as a child of client component. What if server component requires some props to be passed in, and in client component I am doing some calculations ( which could be only happen in client component) and what’s to pass the result of that calculation as a prop in server component, then how can we do this?

10 common mistakes with the Next.js App Router
2024年01月09日  @heysahilsingh 様 
00:17:25 - 00:20:37
The explanation at . - 10 common mistakes with the Next.js App Router

The explanation at .

10 common mistakes with the Next.js App Router
2024年01月09日  @PhilipAlexanderHassialis 様 
00:17:45 - 00:20:37
– Not revalidating data after mutations - 10 common mistakes with the Next.js App Router

– Not revalidating data after mutations

10 common mistakes with the Next.js App Router
2024年01月09日 
00:17:51 - 00:19:11
– Redirects inside of try/catch blocks - 10 common mistakes with the Next.js App Router

– Redirects inside of try/catch blocks

10 common mistakes with the Next.js App Router
2024年01月09日 
00:19:11 - 00:20:37

Vercel

※本サイトに掲載されているチャンネル情報や動画情報はYouTube公式のAPIを使って取得・表示しています。

Timetable

動画タイムテーブル

動画数:280件

– Introduction - Building an OpenAI-powered Slackbot with GPT

– Introduction

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:00:00 - 00:00:17
– Demo - Building an OpenAI-powered Slackbot with GPT

– Demo

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:00:17 - 00:00:30
– OpenAI key - Building an OpenAI-powered Slackbot with GPT

– OpenAI key

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:00:30 - 00:00:41
– Slackbot setup - Building an OpenAI-powered Slackbot with GPT

– Slackbot setup

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:00:41 - 00:01:35
– Function overview - Building an OpenAI-powered Slackbot with GPT

– Function overview

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:01:35 - 00:02:09
– Listening to Slack events - Building an OpenAI-powered Slackbot with GPT

– Listening to Slack events

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:02:09 - 00:03:09
– Verifying the incoming request - Building an OpenAI-powered Slackbot with GPT

– Verifying the incoming request

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:03:09 - 00:04:14
– Responding from OpenAI GPT - Building an OpenAI-powered Slackbot with GPT

– Responding from OpenAI GPT

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:04:14 - 00:06:49
– Example Slack message - Building an OpenAI-powered Slackbot with GPT

– Example Slack message

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:06:49 - 00:07:27
– Configuring Slackbot request URL - Building an OpenAI-powered Slackbot with GPT

– Configuring Slackbot request URL

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:07:27 - 00:08:17
– Deploying to Vercel - Building an OpenAI-powered Slackbot with GPT

– Deploying to Vercel

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:08:17 - 00:08:29
– Viewing logs - Building an OpenAI-powered Slackbot with GPT

– Viewing logs

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:08:29 - 00:09:21
– Configuring function max duration - Building an OpenAI-powered Slackbot with GPT

– Configuring function max duration

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:09:21 - 00:09:58
– Conclusion - Building an OpenAI-powered Slackbot with GPT

– Conclusion

Building an OpenAI-powered Slackbot with GPT
2024年02月07日 
00:09:58 - 00:10:30
– How Conformance helps with performance - How to scale your teams with Conformance and Code Owners

– How Conformance helps with performance

How to scale your teams with Conformance and Code Owners
2024年02月06日 
00:00:00 - 00:01:35
– Conformance in your workflow - How to scale your teams with Conformance and Code Owners

– Conformance in your workflow

How to scale your teams with Conformance and Code Owners
2024年02月06日 
00:01:35 - 00:03:16
– Custom rules in Conformance - How to scale your teams with Conformance and Code Owners

– Custom rules in Conformance

How to scale your teams with Conformance and Code Owners
2024年02月06日 
00:03:16 - 00:06:21
– Allowlisting existing code violations - How to scale your teams with Conformance and Code Owners

– Allowlisting existing code violations

How to scale your teams with Conformance and Code Owners
2024年02月06日 
00:06:21 - 00:08:29
– Incremental migration backed by Conformance - How to scale your teams with Conformance and Code Owners

– Incremental migration backed by Conformance

How to scale your teams with Conformance and Code Owners
2024年02月06日 
00:08:29 - 00:09:17
– Code Owners - How to scale your teams with Conformance and Code Owners

– Code Owners

How to scale your teams with Conformance and Code Owners
2024年02月06日 
00:09:17 - 00:11:38
– Conclusion - How to scale your teams with Conformance and Code Owners

– Conclusion

How to scale your teams with Conformance and Code Owners
2024年02月06日 
00:11:38 - 00:12:14
– Introduction - How Vercel builds Vercel

– Introduction

How Vercel builds Vercel
2024年01月30日 
00:00:00 - 00:00:24
– Git Integration - How Vercel builds Vercel

– Git Integration

How Vercel builds Vercel
2024年01月30日 
00:00:24 - 00:01:35
At the git integration part () you show that this PR has 4 ignored deployments. I don't see this feature on my turborepo app deployed on Vercel. How do you enable that? That's super nice. - How Vercel builds Vercel

At the git integration part () you show that this PR has 4 ignored deployments. I don't see this feature on my turborepo app deployed on Vercel. How do you enable that? That's super nice.

How Vercel builds Vercel
2024年01月30日  @Aaron-eo1gv 様 
00:00:57 - 00:15:15
– v0 - How Vercel builds Vercel

– v0

How Vercel builds Vercel
2024年01月30日 
00:01:35 - 00:03:31
– Deployment summary - How Vercel builds Vercel

– Deployment summary

How Vercel builds Vercel
2024年01月30日 
00:03:31 - 00:04:34
– Web Analytics - How Vercel builds Vercel

– Web Analytics

How Vercel builds Vercel
2024年01月30日 
00:04:34 - 00:05:40
– Speed Insights - How Vercel builds Vercel

– Speed Insights

How Vercel builds Vercel
2024年01月30日 
00:05:40 - 00:07:14
– Logs - How Vercel builds Vercel

– Logs

How Vercel builds Vercel
2024年01月30日 
00:07:14 - 00:08:01
– Monitoring - How Vercel builds Vercel

– Monitoring

How Vercel builds Vercel
2024年01月30日 
00:08:01 - 00:08:42
Nice insight! Thanks for sharing. What lib do you use for the monitoring graphics at ? - How Vercel builds Vercel

Nice insight! Thanks for sharing. What lib do you use for the monitoring graphics at ?

How Vercel builds Vercel
2024年01月30日  @runonce 様 
00:08:10 - 00:15:15
– Edge Config - How Vercel builds Vercel

– Edge Config

How Vercel builds Vercel
2024年01月30日 
00:08:42 - 00:09:33
– Feature Flags - How Vercel builds Vercel

– Feature Flags

How Vercel builds Vercel
2024年01月30日 
00:09:33 - 00:10:37
– Draft Mode - How Vercel builds Vercel

– Draft Mode

How Vercel builds Vercel
2024年01月30日 
00:10:37 - 00:12:16
– Conformance - How Vercel builds Vercel

– Conformance

How Vercel builds Vercel
2024年01月30日 
00:12:16 - 00:13:37
– Incremental adoption - How Vercel builds Vercel

– Incremental adoption

How Vercel builds Vercel
2024年01月30日 
00:13:37 - 00:14:37
– Conclusion - How Vercel builds Vercel

– Conclusion

How Vercel builds Vercel
2024年01月30日 
00:14:37 - 00:15:15
– Introduction - Deploying a simple website to Vercel (HTML, CSS, JavaScript)

– Introduction

Deploying a simple website to Vercel (HTML, CSS, JavaScript)
2024年01月29日 
00:00:00 - 00:00:25
– Deploying the HTML template - Deploying a simple website to Vercel (HTML, CSS, JavaScript)

– Deploying the HTML template

Deploying a simple website to Vercel (HTML, CSS, JavaScript)
2024年01月29日 
00:00:25 - 00:00:55
– Exploring your new website - Deploying a simple website to Vercel (HTML, CSS, JavaScript)

– Exploring your new website

Deploying a simple website to Vercel (HTML, CSS, JavaScript)
2024年01月29日 
00:00:55 - 00:02:00
– Vercel Web Analytics - Deploying a simple website to Vercel (HTML, CSS, JavaScript)

– Vercel Web Analytics

Deploying a simple website to Vercel (HTML, CSS, JavaScript)
2024年01月29日 
00:02:00 - 00:03:53
– Git workflow and pushing changes - Deploying a simple website to Vercel (HTML, CSS, JavaScript)

– Git workflow and pushing changes

Deploying a simple website to Vercel (HTML, CSS, JavaScript)
2024年01月29日 
00:03:53 - 00:05:30
– Vercel Edge Middleware - Deploying a simple website to Vercel (HTML, CSS, JavaScript)

– Vercel Edge Middleware

Deploying a simple website to Vercel (HTML, CSS, JavaScript)
2024年01月29日 
00:05:30 - 00:05:58
– CSS - Deploying a simple website to Vercel (HTML, CSS, JavaScript)

– CSS

Deploying a simple website to Vercel (HTML, CSS, JavaScript)
2024年01月29日 
00:05:58 - 00:06:48
– Conclusion - Deploying a simple website to Vercel (HTML, CSS, JavaScript)

– Conclusion

Deploying a simple website to Vercel (HTML, CSS, JavaScript)
2024年01月29日 
00:06:48 - 00:07:33
– Introduction - Environments on Vercel

– Introduction

Environments on Vercel
2024年01月25日 
00:00:00 - 00:00:24
– Deploying through GitHub - Environments on Vercel

– Deploying through GitHub

Environments on Vercel
2024年01月25日 
00:00:24 - 00:03:08
– Preview and production environments - Environments on Vercel

– Preview and production environments

Environments on Vercel
2024年01月25日 
00:03:08 - 00:05:23
– Custom preview environments - Environments on Vercel

– Custom preview environments

Environments on Vercel
2024年01月25日 
00:05:23 - 00:07:20
– Custom workflows and manual promotion - Environments on Vercel

– Custom workflows and manual promotion

Environments on Vercel
2024年01月25日 
00:07:20 - 00:10:54
– REST API and CLI - Environments on Vercel

– REST API and CLI

Environments on Vercel
2024年01月25日 
00:10:54 - 00:11:02
– Conclusion - Environments on Vercel

– Conclusion

Environments on Vercel
2024年01月25日 
00:11:02 - 00:11:34
– Introduction - Deploying a backend on Vercel (APIs and Functions)

– Introduction

Deploying a backend on Vercel (APIs and Functions)
2024年01月24日 
00:00:00 - 00:00:31
– Deploying a Node.js function - Deploying a backend on Vercel (APIs and Functions)

– Deploying a Node.js function

Deploying a backend on Vercel (APIs and Functions)
2024年01月24日 
00:00:31 - 00:02:00
– Express - Deploying a backend on Vercel (APIs and Functions)

– Express

Deploying a backend on Vercel (APIs and Functions)
2024年01月24日 
00:02:00 - 00:02:46
– Storage and logs - Deploying a backend on Vercel (APIs and Functions)

– Storage and logs

Deploying a backend on Vercel (APIs and Functions)
2024年01月24日 
00:02:46 - 00:03:30
– Templates - Deploying a backend on Vercel (APIs and Functions)

– Templates

Deploying a backend on Vercel (APIs and Functions)
2024年01月24日 
00:03:30 - 00:03:57
– Conclusion - Deploying a backend on Vercel (APIs and Functions)

– Conclusion

Deploying a backend on Vercel (APIs and Functions)
2024年01月24日 
00:03:57 - 00:04:14
– Introduction - Deploying Next.js to Vercel

– Introduction

Deploying Next.js to Vercel
2024年01月22日 
00:00:00 - 00:00:13
– Deploying a Next.js template - Deploying Next.js to Vercel

– Deploying a Next.js template

Deploying Next.js to Vercel
2024年01月22日 
00:00:13 - 00:02:05
– Pushes changes to GitHub - Deploying Next.js to Vercel

– Pushes changes to GitHub

Deploying Next.js to Vercel
2024年01月22日 
00:02:05 - 00:04:11
– Deploying with the Vercel CLI - Deploying Next.js to Vercel

– Deploying with the Vercel CLI

Deploying Next.js to Vercel
2024年01月22日 
00:04:11 - 00:05:44
– Conclusion - Deploying Next.js to Vercel

– Conclusion

Deploying Next.js to Vercel
2024年01月22日 
00:05:44 - 00:06:22
– Introduction - Next.js App Router Caching: Explained!

– Introduction

Next.js App Router Caching: Explained!
2024年01月16日 
00:00:00 - 00:00:24
– Demo - Next.js App Router Caching: Explained!

– Demo

Next.js App Router Caching: Explained!
2024年01月16日 
00:00:24 - 00:01:20
– Caching overview - Next.js App Router Caching: Explained!

– Caching overview

Next.js App Router Caching: Explained!
2024年01月16日 
00:01:20 - 00:02:06
– Foundations - Next.js App Router Caching: Explained!

– Foundations

Next.js App Router Caching: Explained!
2024年01月16日 
00:02:06 - 00:06:10
"the foundational bit to understand" - caching is broken - Next.js App Router Caching: Explained!

"the foundational bit to understand" - caching is broken

Next.js App Router Caching: Explained!
2024年01月16日  @Aleks-fp1kq 様 
00:04:27 - 00:25:22
– Static: fetch() - Next.js App Router Caching: Explained!

– Static: fetch()

Next.js App Router Caching: Explained!
2024年01月16日 
00:06:10 - 00:07:03
Is there any configuration for next.config to console.log the page size that's sent to user? - Next.js App Router Caching: Explained!

Is there any configuration for next.config to console.log the page size that's sent to user?

Next.js App Router Caching: Explained!
2024年01月16日  @rdmPerson 様 
00:06:30 - 00:25:22
Am at  now at the video. And I really would like to have much more tools to debug caching. Especially, when deployed.Because IMO the defaults are good and the idea behind the caching strategies of Next.js too. It's just lacking transparency, what's happening at any given time.One idea would be to have a secure API route where we can inspect, what asset is currently cached for a given active deployment, what pages depend on it, etc. - Next.js App Router Caching: Explained!

Am at now at the video. And I really would like to have much more tools to debug caching. Especially, when deployed.Because IMO the defaults are good and the idea behind the caching strategies of Next.js too. It's just lacking transparency, what's happening at any given time.One idea would be to have a secure API route where we can inspect, what asset is currently cached for a given active deployment, what pages depend on it, etc.

Next.js App Router Caching: Explained!
2024年01月16日  @ryzzlas 様 
00:06:40 - 00:25:22
– Dynamic: fetch() without caching - Next.js App Router Caching: Explained!

– Dynamic: fetch() without caching

Next.js App Router Caching: Explained!
2024年01月16日 
00:07:03 - 00:07:37
Hey there, do you have a GitHub issue for the bug you're seeing? We can take a look. If you want to opt-out of caching for fetch, I talk about this @ in the video. - Next.js App Router Caching: Explained!

Hey there, do you have a GitHub issue for the bug you're seeing? We can take a look. If you want to opt-out of caching for fetch, I talk about this @ in the video.

Next.js App Router Caching: Explained!
2024年01月16日  @leerob 様 
00:07:03 - 00:25:22
– Static: unstable_cache() - Next.js App Router Caching: Explained!

– Static: unstable_cache()

Next.js App Router Caching: Explained!
2024年01月16日 
00:07:37 - 00:09:37
@@MrManafon While I agree that monkeypatching fetch is a bad call, you are commenting on a video that tells you how to cache a non fetch-based API call. It's at . - Next.js App Router Caching: Explained!

@@MrManafon While I agree that monkeypatching fetch is a bad call, you are commenting on a video that tells you how to cache a non fetch-based API call. It's at .

Next.js App Router Caching: Explained!
2024年01月16日  @meenstreek 様 
00:07:37 - 00:25:22
– Dynamic: Direct database calls - Next.js App Router Caching: Explained!

– Dynamic: Direct database calls

Next.js App Router Caching: Explained!
2024年01月16日 
00:09:37 - 00:10:07
why at min  (the request) of the direct call of the database not cached, while at min - Next.js App Router Caching: Explained!

why at min (the request) of the direct call of the database not cached, while at min

Next.js App Router Caching: Explained!
2024年01月16日  @muhammadhossam8557 様 
00:09:40 - 00:18:15
– Revalidating static data - Next.js App Router Caching: Explained!

– Revalidating static data

Next.js App Router Caching: Explained!
2024年01月16日 
00:10:07 - 00:12:32
– Revalidating from external sources (webhooks) - Next.js App Router Caching: Explained!

– Revalidating from external sources (webhooks)

Next.js App Router Caching: Explained!
2024年01月16日 
00:12:32 - 00:14:12
– Revalidating static data with ISR - Next.js App Router Caching: Explained!

– Revalidating static data with ISR

Next.js App Router Caching: Explained!
2024年01月16日 
00:14:12 - 00:15:28
– React cache() - Next.js App Router Caching: Explained!

– React cache()

Next.js App Router Caching: Explained!
2024年01月16日 
00:15:28 - 00:16:40
– App Router and Pages Router differences - Next.js App Router Caching: Explained!

– App Router and Pages Router differences

Next.js App Router Caching: Explained!
2024年01月16日 
00:16:40 - 00:17:52
– Example: Forms with useFormState & useFormStatus - Next.js App Router Caching: Explained!

– Example: Forms with useFormState & useFormStatus

Next.js App Router Caching: Explained!
2024年01月16日 
00:17:52 - 00:19:33
(the request) is cached, is it because of the pure SQL vs ORM ? - Next.js App Router Caching: Explained!

(the request) is cached, is it because of the pure SQL vs ORM ?

Next.js App Router Caching: Explained!
2024年01月16日  @muhammadhossam8557 様 
00:18:15 - 00:25:22
– Using forms without JavaScript - Next.js App Router Caching: Explained!

– Using forms without JavaScript

Next.js App Router Caching: Explained!
2024年01月16日 
00:19:33 - 00:19:59
– Exploring the network tab for a Server Action - Next.js App Router Caching: Explained!

– Exploring the network tab for a Server Action

Next.js App Router Caching: Explained!
2024年01月16日 
00:19:59 - 00:20:49
– Example: Optimistic UI - Next.js App Router Caching: Explained!

– Example: Optimistic UI

Next.js App Router Caching: Explained!
2024年01月16日 
00:20:49 - 00:21:45
– Preventing navigations with pending mutations - Next.js App Router Caching: Explained!

– Preventing navigations with pending mutations

Next.js App Router Caching: Explained!
2024年01月16日 
00:21:45 - 00:22:34
The problem is that your beforeunload handler will not work when navigating via next/Link - Next.js App Router Caching: Explained!

The problem is that your beforeunload handler will not work when navigating via next/Link

Next.js App Router Caching: Explained!
2024年01月16日  @codinginflow 様 
00:22:15 - 00:25:22
– Progressive enhancement - Next.js App Router Caching: Explained!

– Progressive enhancement

Next.js App Router Caching: Explained!
2024年01月16日 
00:22:34 - 00:23:39
– Partial Prerendering - Next.js App Router Caching: Explained!

– Partial Prerendering

Next.js App Router Caching: Explained!
2024年01月16日 
00:23:39 - 00:24:56
– Conclusion - Next.js App Router Caching: Explained!

– Conclusion

Next.js App Router Caching: Explained!
2024年01月16日 
00:24:56 - 00:25:22
– Introduction - 10 common mistakes with the Next.js App Router

– Introduction

10 common mistakes with the Next.js App Router
2024年01月09日 
00:00:00 - 00:00:13
– Calling Route Handlers from Server Components - 10 common mistakes with the Next.js App Router

– Calling Route Handlers from Server Components

10 common mistakes with the Next.js App Router
2024年01月09日 
00:00:13 - 00:01:59
– Static or dynamic Route Handlers - 10 common mistakes with the Next.js App Router

– Static or dynamic Route Handlers

10 common mistakes with the Next.js App Router
2024年01月09日 
00:01:59 - 00:07:00
– Route Handlers and Client Components - 10 common mistakes with the Next.js App Router

– Route Handlers and Client Components

10 common mistakes with the Next.js App Router
2024年01月09日 
00:07:00 - 00:09:03
as you say putting an action like that simplify a lot of things but I think it lacks of "client side validation". I am pretty new to web development but when I try to use an action I always go like: create an handleSubmit function, check user input in that function, call action according to that validation. Is client side validation not that necessary? Or can we send feedback to user from that action? - 10 common mistakes with the Next.js App Router

as you say putting an action like that simplify a lot of things but I think it lacks of "client side validation". I am pretty new to web development but when I try to use an action I always go like: create an handleSubmit function, check user input in that function, call action according to that validation. Is client side validation not that necessary? Or can we send feedback to user from that action?

10 common mistakes with the Next.js App Router
2024年01月09日  @serkan_bayram 様 
00:08:31 - 00:20:37
– Using Suspense with Server Components - 10 common mistakes with the Next.js App Router

– Using Suspense with Server Components

10 common mistakes with the Next.js App Router
2024年01月09日 
00:09:03 - 00:12:35
On  how did you do that thing where the import appears at the bottom of your position? (unstable_noStore) - 10 common mistakes with the Next.js App Router

On how did you do that thing where the import appears at the bottom of your position? (unstable_noStore)

10 common mistakes with the Next.js App Router
2024年01月09日  @anargyrosstylidis2595 様 
00:12:03 - 00:20:37
, you said: "This flicker means this bit should not be cached. It should be run dynamically." Why does the flicker indicate that? 🤔 - 10 common mistakes with the Next.js App Router

, you said: "This flicker means this bit should not be cached. It should be run dynamically." Why does the flicker indicate that? 🤔

10 common mistakes with the Next.js App Router
2024年01月09日  @tonytrinh 様 
00:12:10 - 00:20:37
Thank you Lee, definetly need a video on suspense . - 10 common mistakes with the Next.js App Router

Thank you Lee, definetly need a video on suspense .

10 common mistakes with the Next.js App Router
2024年01月09日  @faizanahmed9304 様 
00:12:32 - 00:20:37
– Using the incoming request - 10 common mistakes with the Next.js App Router

– Using the incoming request

10 common mistakes with the Next.js App Router
2024年01月09日 
00:12:35 - 00:13:59
– Using Context providers with App Router - 10 common mistakes with the Next.js App Router

– Using Context providers with App Router

10 common mistakes with the Next.js App Router
2024年01月09日 
00:13:59 - 00:15:10
– Using Server and Client Components together - 10 common mistakes with the Next.js App Router

– Using Server and Client Components together

10 common mistakes with the Next.js App Router
2024年01月09日 
00:15:10 - 00:15:41
– Adding “use client” unnecessarily - 10 common mistakes with the Next.js App Router

– Adding “use client” unnecessarily

10 common mistakes with the Next.js App Router
2024年01月09日 
00:15:41 - 00:17:51
I'm a bit confused... you first mentioned how AnotherButton doesn't need 'use client' because it's already within the client boundary of the first button.  so then why when you add children are they not also within the client boundary? - 10 common mistakes with the Next.js App Router

I'm a bit confused... you first mentioned how AnotherButton doesn't need 'use client' because it's already within the client boundary of the first button. so then why when you add children are they not also within the client boundary?

10 common mistakes with the Next.js App Router
2024年01月09日  @neilmerchant2796 様 
00:17:18 - 00:20:37
At  you passed a server component as a child of client component. What if server component requires some props to be passed in, and in client component I am doing some calculations ( which could be only happen in client component) and what’s to pass the result of that calculation as a prop in server component, then how can we do this? - 10 common mistakes with the Next.js App Router

At you passed a server component as a child of client component. What if server component requires some props to be passed in, and in client component I am doing some calculations ( which could be only happen in client component) and what’s to pass the result of that calculation as a prop in server component, then how can we do this?

10 common mistakes with the Next.js App Router
2024年01月09日  @heysahilsingh 様 
00:17:25 - 00:20:37
The explanation at . - 10 common mistakes with the Next.js App Router

The explanation at .

10 common mistakes with the Next.js App Router
2024年01月09日  @PhilipAlexanderHassialis 様 
00:17:45 - 00:20:37
– Not revalidating data after mutations - 10 common mistakes with the Next.js App Router

– Not revalidating data after mutations

10 common mistakes with the Next.js App Router
2024年01月09日 
00:17:51 - 00:19:11
– Redirects inside of try/catch blocks - 10 common mistakes with the Next.js App Router

– Redirects inside of try/catch blocks

10 common mistakes with the Next.js App Router
2024年01月09日 
00:19:11 - 00:20:37