Загрузка видео...

Не удалось загрузить видео

На главную

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_oliveira's profile picture

Delba

53,275 subscribers

67,908 просмотров • 2 лет назад •via X (Twitter)

Наука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Delba
Delba2 лет назад

🚀 by @lubieowoce

Фото профиля henrique cunha
henrique cunha2 лет назад

delba, please release your remotion setup 🙏

Фото профиля Sidi jeddou
Sidi jeddou2 лет назад

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

Фото профиля Delba
Delba2 лет назад

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
Matt2 лет назад

Love these vids every time Delba 🙏🏼

Фото профиля freddie
freddie2 лет назад

i could swear i’ve seen this API before

Фото профиля Vitaly Gashkov
Vitaly Gashkov2 лет назад

What color theme is this? 🤔

Фото профиля Indra Zulfi🧢
Indra Zulfi🧢2 лет назад

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

Фото профиля Prabhas
Prabhas2 лет назад

Great explanation with cool animation

Фото профиля Andrew Aliaj
Andrew Aliaj2 лет назад

another cool feature by Next.js

Похожие видео

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)
12:21

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 просмотров • 3 лет назад

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 🔥
0:21

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,406 просмотров • 2 лет назад

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

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

Alex Sidorenko

91,579 просмотров • 2 лет назад

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,709 просмотров • 1 год назад

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,980 просмотров • 2 лет назад

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 🤘
0:41

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,500 просмотров • 2 лет назад

Search box with next/form in Next.js 15
0:33

Search box with next/form in Next.js 15

Alex Sidorenko

86,436 просмотров • 2 лет назад

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.
0:38

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

50,434 просмотров • 1 год назад

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,077 просмотров • 2 лет назад

LIVE UPDATE: A man at the INEC office has alleged that officials are giving people Death Certificate forms to fill and sign, while presenting them as Voter Registration forms. We are being asked to fill and sign what is clearly a Death Certificate form, but they are calling it a voters’ registration form,” the man said.​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​🗣️
1:40

LIVE UPDATE: A man at the INEC office has alleged that officials are giving people Death Certificate forms to fill and sign, while presenting them as Voter Registration forms. We are being asked to fill and sign what is clearly a Death Certificate form, but they are calling it a voters’ registration form,” the man said.​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​🗣️

Big Sman.🍥

145,500 просмотров • 5 месяцев назад

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 →
0:22

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

237,080 просмотров • 2 лет назад

The fact that you can deeply connect with a character form a side quest, help them out and still have the option to give into hunger is such a wild feature to have
0:46

The fact that you can deeply connect with a character form a side quest, help them out and still have the option to give into hunger is such a wild feature to have

NikTek

50,492 просмотров • 2 месяцев назад

Server-side form validation in Next.js
1:33

Server-side form validation in Next.js

Alex Sidorenko

72,160 просмотров • 2 лет назад

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.
0:49

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,124 просмотров • 1 год назад