Uniform blog/General Availability of the new Next.js SDK with App Router support
General Availability of the new Next.js SDK with App Router support
General Availability of the new Next.js SDK with App Router support
Next.js 14 is out, and App Router is now a default way of building new Next.js web apps and websites. Keeping up with the innovations in this hyper-active space, today we released our new SDK for Next.js apps with support for App Router and React Server components. This SDK has been in preview for the last couple of months and we already have customers in production using it.
Why is this important?
I wrote last week about the reasonings behind general excitement about Next.js and why it matters not just for developers.
What can you do with App Router and React Server Components?
While there are many benefits to the new approach to building Next.js apps, our absolute favorite highlight is a new way to render Next.js apps with edge runtime - delivering highly personalized web experiences with minimal latency and global scale. Think static site generation-like Time to First Byte but without the cost of web page pre-rendering at build time, which is often a significant consideration for high content volume sites.
Check out this comparison table in Next.js docs to learn more.
Looking ahead, this is a huge step towards Partial Prerendering, which is a new experimental rendering mode that Next.js 14 introduced. Learn more about it here. As this new rendering mode matures, you can now start preparing for this.
Besides the edge runtime, you can now select which components require the client React runtime, allowing you to reduce the amount of client-side JavaScript for large web apps. With React Server Components, you can unlock a new programming model for server-side components and leverage data fetching co-location, which was missing in the Page Router world.
What Uniform SDK adds to the table?
This new SDK supports all the capabilities of the Uniform platform within the Next.js App Router environment:
- Visual in-line editing of content
- No-code composition of components - allowing business users to build new pages and change page layouts without being dependent on developers.
- Personalization and A/B testing that is compatible with all the rendering modes and runtimes supported by Next.js natively, including edge runtime!
- Routing and redirect management that is controlled in your Uniform project visually instead of hard-coded.
Quick demo
See more details in action!
Check out our recent launch live stream, where we walked through the process of adding this new SDK into a Next.js Commerce app:
How to get started?
We created an in-depth tutorial showing how to add this new SDK into a vanilla Next.js app here, and it will help you understand the mechanics.
The quickest way to start is to spin up one of three starter kits we open-sourced:
- Hello World starter: this is a single component / single page starter with minimal setup. It could be a good starting point for a new project if you plan to use your own component library and need the barebones essentials. The code & content for the starter is open-sourced here. Check the README file to learn how to get started.
- Component Starter Kit (deployed demo is here)ported over to the new SDK. If you'd like a more feature-rich starting point with 50+ components and a more opinionated structure, the Component Starter Kit is highly recommended. It's already pre-wired with the latest Uniform SDK for App Router. This code & content for the starter is open-sourced here. Check the README file to learn how to get started.
- Next.js Commerce (deployed demo is here). If you are looking for a lightweight commerce starter and like the sound of Next.js Commerce, consider our adapted version of Next.js Commerce that is open-sourced here. Check the README file to learn how to get started.
Do you want to play?
If you want to experience the new Next.js SDK with Uniform visual workspace, reach out to set up a demo or request a sandbox here.
