New video: Introduction to the @nextjs App Router! ✨
I cover the fundamentals of routing, data fetching, caching, and more as we get closer to full stability.
youtu.be/gSSsZReIFRk
Turbopack is getting close to beta!
We're nearly done with Next.js features and focusing on stability. We've also been investing in features to aid adoption, like supporting webpack loaders.
Try it out and let us know your feedback!
The @nextjs App Router now supports static exports!
Start with a static site / SPA, then later upgrade to use server features. It now also supports static i18n routing and static API Routes (with Route Handlers).
Now available on `canary`, soon stable!
beta.nextjs.org/docs/configu…
ALT Diagram showing a folder structure for the app router on the left, with a few pages, and then the transformation after running next build which generates the out folder with HTML files for each route.
Today, we’re thrilled to launch react.dev, the new home for React and its documentation. It teaches modern React with function components and Hooks, and we’ve included diagrams, illustrations, challenges, and over 600 interactive examples. Check it out!
With @nextjs Route Handlers on @vercel, setting up live pricing was super simple on our marketing site 🖤 This used to be a complex custom API from our backend but now it’s a piece of cake.
ALT Code snippet screenshot showing a metadata JavaScript object, with properties used to define the content of the head of an HTML document. For example, title and description.
Next.js has passed 100,000 stars on GitHub – now the 14th most-starred software repo.
Thank you to our community, from the library maintainers to the educators.
Statically typed links are coming to @nextjs:
◆ Autocompletion
◆ Error on invalid routes
◆ Prevents 404 links during build
◆ Dynamic, catch-all, and optional catch-all routes
◆ Works with both `pages` and `app`
◆ No extra configuration needed!
ALT Code snippet screenshot showing a metadata JavaScript object, with properties used to define the content of the head of an HTML document. For example, title and description.
It’s here. Beautifully designed components built with Radix UI and Tailwind CSS.
github.com/shadcn/ui
A collection of accessible and customizable components that you can copy and paste into your apps.
Free. Open Source. And Next.js 13 Ready.
TIL you can toggle Suspense boundaries in React Dev Tools for easy debugging.
Useful for making sure your loading skeletons line up with your real content.
h/t @sebmarkbage ✌️
I was missing auto favicon generation and optimization in Next.js, so I wrote quickly a CLI for it.
Features:
- CLI uses sharp library for image creation and optimization
- Creates webmanifest
- Generates CSS
github.com/pixel-point/favpi…
We've been running a @nextjs job board on Github Discussions for 1 full year!
100+ companies like Walmart and Sony have posted jobs and hundreds of developers have posted their profiles.
Super proud of all the devs we helped get jobs for in 2022! Here's to more jobs in 2023!
Next.js Middleware allows you to run code before an incoming request is completed.
In 13.1, we've made Middleware more powerful, allowing you to produce responses and set request headers.
Learn more from @leeerob in this 2-minute demo.
nextjs.org/13-1