✨New tutorial: Using Images in Next.js You'll learn how to: ◆ Use the next/image component ◆ Automatically optimize local or remote images ◆ Handle common patterns (background images, grids) And more! youtu.be/IU_qq_c_lKA

We'd like to share an update on the Next.js App Router and our current focus areas: ◆ Improving Performance ◆ Improving Stability ◆ Improving Developer Education nextjs.org/blog/june-2023-up…

✨New tutorial: Incrementally adopt the Next.js App Router You'll learn how to: ◆ Move over a single page at a time ◆ Move from `getServerSideProps` to `async` components ◆ Interweave server/client components ◆ Use layouts and metadata And more! youtube.com/watch?v=YQMSieti…

Introducing the AI Chatbot Template, built with: ◆ Next.js ◆ Vercel KV ◆ Vercel AI SDK ◆ Tailwind CSS ◆ Radix UI ◆ Shadcn UI ◆ OpenAI Clone and deploy your own version. chat.vercel.ai

Dogfooding is a super power. @vercel's website is constantly automatically updated (with PR review) to run the latest canary of @nextjs. Not gonna lie, sometimes it hurts to run the cutting edge, but the payback is huge. E.g. yesterday I was like "Why is vercel.com/ai-accelerator so slow?" Turns out there was a bug in the Next.js canary that was loading more CSS than necessary for a given route. We fixed it upstream, repushed, and prevented this bug going out to all users of the framework before the next release. We'll add automated tests to catch similar issues going forward.

Next.js Docs Meta Update 🧹🌿 ◇ Search added to home page @raunofreiberg ◇ Search now has app/pages filter @manovotny ◇ Diagrams are more color-blind friendly @oyaaaaaaaasumi ◇ New feedback component on doc pages @emilkowalski

I had the privilege of chatting with @acdlite and @sebmarkbage about React's latest features: Suspense, Streaming, Server Components, and Server Actions. We discussed what they are, how they fit together, and what the future of React might look like. ↳ youtube.com/watch?v=g5BGoLyG…

Shipped a new Next.js Docs Page! Project Structure: An overview of all the file and folder conventions in Next.js. ↳ nextjs.org/docs/getting-star…

💡 Using Next.js's Intercepting Routes can be useful if you want to show a route while keeping the context for the current page! E.g. we can render an overlaying modal on soft navigation and a standalone page on hard navigation, which requires a full page reload:

Next.js 13.4 ◆ App Router (Stable) ◆ Turbopack (Beta) ◆ Server Actions (Alpha) vercel.fyi/next-13-4

The new Next.js website is one of the best websites I've had the pleasure to work on together with @glennui. Here's a breakdown of some design details that were particularly exciting to craft. rauno.me/craft/nextjs

▲ @Vercel just launched @Nextjs 13.3 last week. Here are 3 incredibly cool UI interactions you can build with it 👇

New in Next.js: File-based Metadata API 1. Drop an Icon or OG image into `/app` and Next.js will auto-generate robot-friendly metadata for you. 2. Generate image, robots, sitemap, and manifest files using type-safe APIs.

Next.js 13.3 ◆ File-Based Metadata API ◆ Dynamic Open Graph Images ◆ Static Export for App Router ◆ Parallel Routes and Interception nextjs.org/13-3

Good news! @nextjs now automatically restarts your local dev server when you make changes to `next.config.js`. Available on `canary` and soon the next stable release 🔥

This new Next.js website iteration was fun to work on with @glennui, @almonk, and many others. So many tiny details to craft: responsive grid lines, masonry grids, and world-class focus states. Plenty more to come! nextjs.org