Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

How to use Next.js metadata if the page is a client component

asidorenko_'s profile picture

Alex Sidorenko

35,147 subscribers

91,579 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Alex Sidorenko profil fotoğrafı
Alex Sidorenko1 yıl önce

This is a quick fix for when you are refactoring your codebase to the App Router and want to quickly add metadata to existing pages with interactivity. But ideally, it's better to isolate interactive bits closer to where they're needed.

Guillermo Rauch profil fotoğrafı
Guillermo Rauch1 yıl önce

Love that page.client convention. Clean

Alex Sidorenko profil fotoğrafı
Alex Sidorenko1 yıl önce

Yes! It's from the Next Discord FAQ. Props to Vũ Văn Dũng (not sure what's the right X handle)

عَ profil fotoğrafı
عَ1 yıl önce

Can I do the same thing to call server actions or get cookie information ? 🤔

Alex Sidorenko profil fotoğrafı
Alex Sidorenko1 yıl önce

Server Actions are designed to be used in client components.

Moti Azu profil fotoğrafı
Moti Azu1 yıl önce

You literally made the page not a client component. I like the naming convention you used though. But you didn’t use metadata in a client component.

Ajin profil fotoğrafı
Ajin1 yıl önce

cool

Benzigar Alvin. profil fotoğrafı
Benzigar Alvin.1 yıl önce

nice idea, wrapping client component inside server component. 👍🏻

rayyan ✦ design engineer profil fotoğrafı
rayyan ✦ design engineer1 yıl önce

i never think of it this way, thanks man

Subhajit Bhar profil fotoğrafı
Subhajit Bhar1 yıl önce

I'm learning next.js. this is very useful for me. Thanks for sharing 🙏🏼

Benzer Videolar

How to recover from a server component error in Next.js
0:34

How to recover from a server component error in Next.js

Alex Sidorenko

67,557 görüntüleme • 1 yıl önce

Next.js preserves client state on the page during navigation when cacheComponents is enabled
0:20

Next.js preserves client state on the page during navigation when cacheComponents is enabled

Alex Sidorenko

161,065 görüntüleme • 7 ay önce

When to use Server vs Client components in Next.js 13
0:50

When to use Server vs Client components in Next.js 13

Alex Sidorenko

148,155 görüntüleme • 2 yıl önce

Streaming data from server to client with "use" in Next.js
0:53

Streaming data from server to client with "use" in Next.js

Alex Sidorenko

36,533 görüntüleme • 1 yıl önce

Two ways to handle a blocking component in Next.js: • Cache: so it can be prerendered with the rest of the page. • Stream: so the rest of the page doesn't have to wait for it.
1:09

Two ways to handle a blocking component in Next.js: • Cache: so it can be prerendered with the rest of the page. • Stream: so the rest of the page doesn't have to wait for it.

Next.js

61,805 görüntüleme • 4 ay önce

Next.js security tip: Use "server only" for the code that should never be exposed to the client.
0:29

Next.js security tip: Use "server only" for the code that should never be exposed to the client.

Alex Sidorenko

109,311 görüntüleme • 1 yıl önce

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.
1:25

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

Delba

67,908 görüntüleme • 1 yıl önce

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.
1:24

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 görüntüleme • 2 yıl önce

"How to share state between React client components with a parent server component?" 👇
0:32

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

51,480 görüntüleme • 1 yıl önce

📹 Self-Hosting Next.js Learn how to deploy Next.js, Postgres, and Nginx to a $4 VPS with Docker. I'll explain how to use and configure Next.js features like image optimization, caching & ISR, streaming, middleware, server components, and more. Demo app is open source!
45:12

📹 Self-Hosting Next.js Learn how to deploy Next.js, Postgres, and Nginx to a $4 VPS with Docker. I'll explain how to use and configure Next.js features like image optimization, caching & ISR, streaming, middleware, server components, and more. Demo app is open source!

Lee Robinson

568,158 görüntüleme • 1 yıl önce

Form validation is hard. What if there was a Next.js form lib that does both client and server validation from one Zod schema 👀
0:43

Form validation is hard. What if there was a Next.js form lib that does both client and server validation from one Zod schema 👀

Alex Sidorenko

145,943 görüntüleme • 2 yıl önce

Demo of forms with React 19 and Next.js. If you've wondered... "Why does the form clear out my input values?" "How do I pass data from my server action → client?" "How do I handle client / server validation?" "How do I display inline errors next to inputs?" This should help!
9:12

Demo of forms with React 19 and Next.js. If you've wondered... "Why does the form clear out my input values?" "How do I pass data from my server action → client?" "How do I handle client / server validation?" "How do I display inline errors next to inputs?" This should help!

Lee Robinson

42,736 görüntüleme • 1 yıl önce

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!
0:40

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!

Guillermo Rauch

66,013 görüntüleme • 1 yıl önce

New video: MDX with Next.js! Learn how to combine the power of React components with markdown in the App Router. We also cover some of the built-in metadata features as well as CSS view transitions.
12:32

New video: MDX with Next.js! Learn how to combine the power of React components with markdown in the App Router. We also cover some of the built-in metadata features as well as CSS view transitions.

Lee Robinson

79,109 görüntüleme • 1 yıl önce

how does React know if a component renders?
0:56

how does React know if a component renders?

Aiden Bai

82,064 görüntüleme • 1 yıl önce

The use of natural lighting here and use of large openings along with the garden, This is how you design a home, the client taste is obvious here.
1:27

The use of natural lighting here and use of large openings along with the garden, This is how you design a home, the client taste is obvious here.

Gamer_Architect

20,985 görüntüleme • 2 ay önce

"How can I use server components for data fetching if all my components also need hooks or onClick?" Move the interactive part into a separate component
0:32

"How can I use server components for data fetching if all my components also need hooks or onClick?" Move the interactive part into a separate component

Alex Sidorenko

50,595 görüntüleme • 1 yıl önce

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.
0:56

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

shadcn

52,962 görüntüleme • 1 yıl önce

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?
1:25

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

Lee Robinson

177,009 görüntüleme • 1 yıl önce