React Server Components bring rendering flexibility to the component level in Next.js. Hear from @aurorascharff at Next.js Conf to learn about: • Async components • Efficient data management • Optimizing load times and interactivity Join us in SF or stream online on Oct 24. vercel.fyi/conf24

Full Next.js Conf speaker lineup and schedule now available. Get your ticket, we're almost sold out. vercel.fyi/conf24

Next.js Conf speaker spotlight: @olegakbarov Hear how @perplexity_ai is building AI UIs with streaming, schema validation, rendering structured output from LLMs, React Server Components, and Next.js App Router. vercel.fyi/conf24

Announcing Next.js Conf keynote speakers: @rauchg, @delba_oliveira, and @joshcstory Register now to watch the livestream or purchase an in-person ticket to see them in SF on Oct 24. vercel.fyi/conf24

Introducing Emma Mansell as a speaker for Next.js Conf. Learn how @nypl's Digital Collections migrated from Ruby to Next.js, boosting speed and accessibility to WCAG 2.0/2.1 AA standards. Early bird pricing ends tomorrow—register now to save $250. vercel.fyi/conf24

Who is here for the Easter eggs?🥚 nextjs.org/conf

Honored to have the Next.js Conf site named today's @awwwards site of the day. nextjs.org/conf

Companies like Perplexity, PayPal, and Peloton trust Next.js to power their business. At Next.js Conf: • See how PayPal transformed its checkout experience • Hear about Peloton's migration to Next.js • Learn how Perplexity is using AI, Streaming, and React Server Components Announcing speakers soon. There's still time to grab tickets before early bird pricing ends. vercel.fyi/conf24

Thank you to everyone who submitted a CFP for Next.js Conf 2024. We received an overwhelming number of responses. We're aiming to reply to all applicants by the end of this week. In the meantime, don't forget to grab your ticket. nextjs.org/conf

Which one of you posted this?

The Next.js Conf CFP is now open. Submit your talk ideas by Sept 6 and let us know what you want to hear about. nextjs.org/conf/cfp

Next.js Conf is here. Join us in SF or online Oct 24. • Sessions led by you (apply today) • Hands-on workshops led by Next.js experts • Meet and learn from the community Register now and apply to speak: vercel.fyi/conf24

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 → next-books-search.vercel.app Code → github.com/vercel-labs/book-…

Ask me anything about @nextjs 👂

Excited to share our recent achievement with the broader community! We successfully migrated Faire's largest Frontend codebase (over 1 million lines of code and 100+ contributors) from a legacy React Router setup to Next.js App Router with RSCs! craft.faire.com/boosting-per…

`useOptimistic` is so fun. Next.js Commerce is feeling 🔥 demo.vercel.store

Rendering is how your application converts source code into HTML, and there isn't one right way to do it. From Server-Side Rendering (SSR) unique content for every visitor to prerendering your HTML files ahead of time, here's what to consider. vercel.com/blog/how-to-choos…

Next.js file-based Metadata: `icon` Add an `icon` file to the app folder and Next.js will generate the correct `<head>` metadata. Use: • Image files (.svg .jpg .png) • Code (.js .tsx) and Next.js APIs to generate an icon e.g. change color based on the current environment

An update on Turbopack, our new TypeScript bundler: • The source code is moving to the Next.js repo to help us iterate faster • We're close to a stable release for local development • After stability, we plan to support more frameworks vercel.com/blog/turbopack-mo…

Next.js file-based Metadata: Favicons 🤏 Drop a `favicon.ico` file into the `/app` folder and Next.js will automatically generate the correct `<head>` metadata for you.