What is Next.js?
Next.js is a free and open source web application framework from Vercel for developing single-page Javascript applications. The benefits of the Next.js framework are numerous, for both ourselves and our clients.
Why do we use it?
As users, our expectations for digital platforms have become steadily more stringent. That is, when a website fails to load in milliseconds, we never fail to notice. Overwhelmingly, it's back-end technology decisions that play a huge part in the performance, scalability, and success of the end-product. And when the majority of users will spend less than 15 secondson a webpage, and 47% of consumers expect a load time of 2 seconds or less (even on a slow 2G network), every moment counts.
As a composable-first agency, we aim to provide consistently fast and high-performing end-products to our clients. This would not have been possible without Next.js.
Next.js loves developers
Image Optimization
<Image> and Automatic Image Optimization with instant builds
Internationalization
Built-in Domain & Subdomain Routing and Automatic Language detection
Next.js Analytics
A true lighthouse score based on real visitor data & page-by-page insights
Zero Config
Automatic compilation and bundling; optimized for production from the start
Hybrid: SSG and SSR
Pre-render pages at build time (SSG) or request time (SSR) in a single project
Incremental Static Regeneration
Add and update statically pre-rendered pages incrementally after build time
TypeScript Support
Automatic TypeScript configuration and compilation
File-system Routing
Every component in the pages directory becomes a route
API Routes
Optionally create API endpoints to provide backend functionality
Fast Refresh
Fast, reliable live-editing experience, as proven at Facebook scale
Built-in CSS Support
Create component-level styles with CSS modules. Built-in Sass support
Code-splitting and Bundling
Optimized bundle splitting algorithm created by the Google Chrome team
Next.js features that make your life easier
Improved Core Web Vitals score
Starting May 2021, your Core Web Vitals score will become a ranking factor in Google search results. That means that poorly-scoring websites will slide down Google search results, while high-performing websites will rise up above their competition. Learn more about Google Core Web Vitals or test your website using Google's free tool.
The good news: Next.js optimizes your site for you with automatic image resizing. You get all green, all the time — with little to no effort. Check out our blog on Core Web Vitals for more information.
Leverage serverless API Routes
API routes provide a solution to build your API with Next.js. For new projects, you can build your entire API with API Routes. If you have an existing API, you do not need to forward calls to the API through an API Route.
Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size. Vercel and Next.js take care of everything, from resource management to deployment, and store it in the Cloud.
Some distinct advantages of this serverless API include:
- It only runs when called, reducing load
- Resources are scaled according to your needs – so you don't have to worry if your API will resist x100 usage
- Opportunities for configuration are extensive; for example, you can deploy your API from a GitHub repository
Faster builds with incremental static regeneration
Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.
When a request is made to a page that was pre-rendered at build time, it will initially show the cached page.
Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
After the 10-second window, the next request will still show the cached (stale) page
Next.js triggers a regeneration of the page in the background.
Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page remains unaltered.
When a request is made to a path that hasn’t been generated, Next.js will server-render the page on the first request. Future requests will serve the static file from the cache. In addition, Fast Refresh ensures that most edits are visible within a second.
Are you still here? Go!