Next.js
Next.js is a full-stack React-based framework to build high-performance, scalable Web applications. It simplifies the development process and supports various rendering modes, suitable for project requirements.
Note:
Currently Pages supports Next.js versions 13.5+, 14, and 15, with the earliest version being 13.5+.
Core Features
Multiple rendering modes: Supports SSG (static generation), SSR (server-side rendering), ISR (incremental static regeneration), and CSR (client-side rendering), flexibly adapting to static and dynamic scenarios.
File-based routing: Automatically generates routes (Pages Router or App Router) through files and folders structure, simplifying page management.
API routing: Built-in API feature to easily create backend APIs.
Performance optimization: Automatic code splitting and quick refresh enhance loading speed and development experience.
TypeScript support: Native support for TypeScript to enhance code reliability.
Strengths
Quickly build SEO-friendly apps with superior performance.
Unify frontend and backend development experience and reduce learning cost.
Suitable for a range of scenarios from static blogs to complex dynamic applications.
Quick Start
Start deployment of the Next.js project on EdgeOne Pages
If you have a Next.js project, you can create a project by importing a git repository
Use a provided Next.js sample project, click one-click deployment to deploy the project to Pages
or from the template library in Pages, select the Next.js Template to deploy
Support for Next.Js in Pages
Pages supports the legacy version of Next.js Pages Router, but we recommend using App Router.
The following table shows the key characteristics of Next.js currently supported by Pages. Pages will support more Next.js features as soon as possible, but experimental features may not yet be fully stable.
Next.Js Features | Support Status |
App Router | ✅ |
Pages Router | ✅ |
Server-Side Rendering (SSR) | ✅ |
Incremental Static Regeneration (ISR) | ✅ |
Static Site Generation (SSG) | ✅ |
React Server Components | ✅ |
Response Streaming | ✅ |
Route Handlers | ✅ |
Experimental framework features | Partially supported |
Redirects and rewrites | Currently not supported for Next.js rewrite and redirect. We recommend using edgeone.json to configure. Refer to the document for details. |
Server-Side Rendering (SSR)
Server-side rendering allows you to dynamically render webpages on servers. Each time users initiate requests, the server dynamically generates HTML by using getServerSideProps (Pages Router) or server components in App Router to dynamically obtain data (such as user sessions, query parameters).
Default build settings are as follows:
Build command:
npm run buildOutput directory:
.next
Incremental Static Regeneration (ISR)
Incremental Static Regeneration is an extension of SSG, combining the advantages of SSG and SSR. When data is updated, there is no need to rebuild the entire site. ISR brings developers three key benefits: better performance, higher security, and shorter build time.
To enable ISR during static page generation, you can use getStaticProps (Pages Router) or the revalidate option in App Router. Set revalidate to periodically regenerate (such as every 60 seconds) or call revalidatePath as needed.
Note:
Warning: The revalidatePath method is currently an experimental feature and may not yet be fully stable.
Default build settings are as follows:
Build command:
npm run buildOutput directory:
.next
Static Site Export (SSG)
If you do not need any dynamic features provided by Next.js, you can use it to generate fully static sites. Configure it as static export mode and attempt to modify next.config.js as follows:
/** @type {import('next').NextConfig} */const nextConfig = {output: 'export', // Enable static exportimages: {unoptimized: true // Disable image optimization for static export},trailingSlash: true, // Add a trailing slash for high compatibility};
Default build settings are as follows:
Build command:
npm run buildOutput directory:
out
Streaming Rendering
Pages support streaming rendering through React Server Components (RSC).
With the aid of the Suspense component, page content can be gradually streamed from the server to the client rather than waiting for the entire webpage to render completely before sending it all at once. This can distinctly improve user experience, particularly in situations with slow data access or complex webpages.
Sample code (in page.tsx):
import { Suspense } from 'react';import { PostFeed, Weather } from './Components';export default function Posts() {return (<section><Suspense fallback={<p>Loading post...</p>}><PostFeed /> {/* This component asynchronously fetches data and renders in streaming */}</Suspense><Suspense fallback={<p>Loading weather...</p>}><Weather /></Suspense></section>);}
PostFeed and Weather can render independently in streaming. If one is slow, the other won't block.