Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

53,275 subscribers

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

Bilim & Teknoloji Eğitim

Anya Rossi• Live Now

Private livecam show

10 Yorum

Delba profil fotoğrafı

Delba1 yıl önce

🚀 by @lubieowoce

henrique cunha profil fotoğrafı

henrique cunha1 yıl önce

delba, please release your remotion setup 🙏

Sidi jeddou profil fotoğrafı

Sidi jeddou1 yıl önce

This is amazing, Delba. I’m not sure if I should upgrade to v15 for I’m scared😅

Delba profil fotoğrafı

Delba1 yıl önce

Up to you. Some folks like to wait a bit. If it helps, we've had two RCs and use v15 on all Vercel sites. If you do, try running the upgrade CLI with automated codemods for every change. Let us know if it missed anything.

Matt profil fotoğrafı

Matt1 yıl önce

Love these vids every time Delba 🙏🏼

freddie profil fotoğrafı

freddie1 yıl önce

i could swear i’ve seen this API before

Vitaly Gashkov profil fotoğrafı

Vitaly Gashkov1 yıl önce

What color theme is this? 🤔

Indra Zulfi🧢 profil fotoğrafı

Indra Zulfi🧢1 yıl önce

Hey @delba_oliveira Thanks for Sharing. Quick qs, How do you build this kind of video?

Prabhas profil fotoğrafı

Prabhas1 yıl önce

Great explanation with cool animation

Andrew Aliaj profil fotoğrafı

Andrew Aliaj1 yıl önce

another cool feature by Next.js

Benzer Videolar

Let's build an email client with Next.js and Postgres ✉️ ✅ Navigate between routes in a column layout while maintaining scroll position (layouts support) ✅ Submit forms without JavaScript enabled (progressive enhancement) ✅ Navigate between routes extremely fast (prefetching and caching) ✅ Retain your UI position on reload (URL state)

Let's build an email client with Next.js and Postgres ✉️ ✅ Navigate between routes in a column layout while maintaining scroll position (layouts support) ✅ Submit forms without JavaScript enabled (progressive enhancement) ✅ Navigate between routes extremely fast (prefetching and caching) ✅ Retain your UI position on reload (URL state)

Lee Robinson

197,036 görüntüleme • 2 yıl önce

Clutch is a great way to find leads. I just built a free tool that will scrape the search results page for you. Get tens of thousands of results in a few minutes. Drop a comment to get it 🔥

Clutch is a great way to find leads. I just built a free tool that will scrape the search results page for you. Get tens of thousands of results in a few minutes. Drop a comment to get it 🔥

Adrian | The Web Scraping Guy

24,337 görüntüleme • 1 yıl önce

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

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

Alex Sidorenko

91,579 görüntüleme • 1 yıl önce

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

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

Alex Sidorenko

160,637 görüntüleme • 7 ay önce

Wanna see something wild? This is a search-as-you-type that uses navigate() on every keypress. Keeps all important state in the URL. Page reload and browser navigation always works. thanks to TanStack Router 🤘

Wanna see something wild? This is a search-as-you-type that uses navigate() on every keypress. Keeps all important state in the URL. Page reload and browser navigation always works. thanks to TanStack Router 🤘

Swizec Teller

102,498 görüntüleme • 2 yıl önce

Search box with next/form in Next.js 15

Search box with next/form in Next.js 15

Alex Sidorenko

86,316 görüntüleme • 1 yıl önce

🪙The Bank of England's Governor is NOT convinced "that we need to create new forms of money – such as a #CBDC" It is clear, a UK CBDC is a solution in search of a problem Read⤵️

🪙The Bank of England's Governor is NOT convinced "that we need to create new forms of money – such as a #CBDC" It is clear, a UK CBDC is a solution in search of a problem Read⤵️

Big Brother Watch

11,765 görüntüleme • 11 ay önce

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

Delba

48,478 görüntüleme • 1 yıl önce

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database. • Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database. • Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state. • State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results. • Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar. • Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change. • State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel. • Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages. This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset. Demo → Code →

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database. • Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database. • Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state. • State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results. • Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar. • Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change. • State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel. • Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages. This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset. Demo → Code →

Lee Robinson

236,573 görüntüleme • 1 yıl önce

3 years later, the magic of Remix (React Router v7) progressive enhancement of forms has not worn off on me. I literally did nothing for this form to work before JS loads on a slower connection I did, however, intentionally build a fancy UX when there is JS

3 years later, the magic of Remix (React Router v7) progressive enhancement of forms has not worn off on me. I literally did nothing for this form to work before JS loads on a slower connection I did, however, intentionally build a fancy UX when there is JS

Ryan Florence

25,058 görüntüleme • 1 yıl önce

Server-side form validation in Next.js

Server-side form validation in Next.js

Alex Sidorenko

72,160 görüntüleme • 2 yıl önce

A page for "THE DOOMIES" has appeared on the new section of the Disney+ website "What's On Disney+". Seems that the page is brand new as if you click the title for the show's info it redirects to a 404 page. News on the show are coming? 👀 #TheDoomies

DTVA News

11,518 görüntüleme • 7 ay önce

You absolutely have to watch this. The new federal standards require a loyalty pledge in the form of a two page essay to the dictatorship.

You absolutely have to watch this. The new federal standards require a loyalty pledge in the form of a two page essay to the dictatorship.

MAGA Cult Slayer🦅🇺🇸

30,056 görüntüleme • 1 yıl önce

CONFIRMED: Did you know that in many of Mega Eelektross’s move animations it flips on its side so that it and its arms fully form a traditional Japanese fish kite/streamers, Koinobori! ALSO it actually forms a capital E for Eelektross. Kinda like how Mega Malamar forms an M👀

CONFIRMED: Did you know that in many of Mega Eelektross’s move animations it flips on its side so that it and its arms fully form a traditional Japanese fish kite/streamers, Koinobori! ALSO it actually forms a capital E for Eelektross. Kinda like how Mega Malamar forms an M👀

SoulSilverArt

614,153 görüntüleme • 6 ay önce

Cinnamon handwashing is a form of elemental energy work that manifests abundance in many forms especially money. Money is called currency because it is supposed to flow. Energy work makes it flow like a current ↯

Cinnamon handwashing is a form of elemental energy work that manifests abundance in many forms especially money. Money is called currency because it is supposed to flow. Energy work makes it flow like a current ↯

🔔Orí Ṣéadé

605,841 görüntüleme • 5 ay önce

a woman on here said that a black author made such a large impact on Russian literature that he essential helped form the Russian language as it is today (modern russian)

a woman on here said that a black author made such a large impact on Russian literature that he essential helped form the Russian language as it is today (modern russian)

Mageba

139,556 görüntüleme • 6 ay önce