What is Next.js?
Next.js is an open-source JavaScript framework that was created and is managed by Vercel (formerly Zeit). React.js is purely a view library, Next completes the solution with advanced routing, static compilation, server-side rendering, image optimization, code splitting, and more. These features make it an ideal choice for high-performance ecommerce applications, improving speed, usability, and SEO.
Next.js Features
Hot Code Reloading
Next.js includes Hot Code Reloading (HCR) to improve developer efficiency. Next.js prevents the need to refresh or restart the application by tracking any code changes and automatically applying them to the running application, allowing developers to see the effects of their chagnes in realtime.
Server Rendering
With Server-Side Rendering (SSR), Next.js improves SEO and initial size speed by rendering React components on the server and sending the final HTML to the client. You can learn more about rendering techniques here.
Ecosystem Compatibility
Next.js plays well with the rest of the JavaScript, Node, and React ecosystem.
Automatic Code Splitting
Next.js leverages Automatic Code Splitting to improve performance by reducing the amount of code that needs to be loaded by the browser. The framework breaks an application into smaller chunks which can be loaded as necessary. Pages are rendered with just the libraries and JavaScript that they need, no more. Instead of generating one single JavaScript file containing all the app code, the app is broken up automatically by Next.js in several different resources.
Prefetching
The Next.js router includes the option for prefetching. The Link component, used to link together different pages, supports a prefetch prop which automatically prefetches page resources (including code missing due to code splitting) in the background. By downloading content before it is needed, the application will feel faster to the end-user.
TypeScript Support
Next.js is written in TypeScript and as such comes with excellent TypeScript support.
Why Use Next.js eCommerce
Next js delivers superior application performance with its code being split into separate bundles that are lazily loaded behind the scenes. This allows achieving superior performance even with an unstable connection.
Explore how you can deliver innovative commerce projects and experiences for your business with Elastic Path and Next.js.
Enable The Label is able to sell unique fashion items in a unique way by combining Elastic Path with Next.js.
SDK Optimized for Next.js
With our SDK and a rich feature set at your fingertips, power your inventory, carts, categorization, search, shopping cart, and more. We help you to easily create and bring to life beautiful Next eCommerce experiences.
D2C Starter Kit
The D2C Starter Kit is build on Next.js and can kickstart your development process. Available on GitHub, this project provides the setup and functionality for a rich and performance eCommerce solution.
You can get started with Elastic Path Commerce Cloud and Next.js by cloning the application and starting the dev server:
yarn dev
# or
npm run dev
Next.js FAQ's