Next.js
Next.js is a full-stack React-based framework to build high-performance, scalable Web applications. It simplifies the development process, supports various rendering modes, and is 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 functionality to easily create backend APIs.
Performance optimization: Automatic code splitting and quick refresh to enhance loading speed and development experience.
TypeScript support: Native support for TypeScript to enhance code reliability.
Strengths
Quickly build SEO-friendly applications with superior performance.
Unify backend and frontend development experience and reduce learning cost.
Suitable for various 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 sample Next.js project we provide to quickly deploy your project to Pages
or from the Pages template library, select the Next.js Template to deploy
Support for Next.Js in Pages
Pages supports the legacy Pages Router for Next.js, but we recommend using the 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 redirection. We recommend using edgeone.json to configure. For details, refer to the document. |
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 and 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. It eliminates the need to rebuild the entire site when data is updated. 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 (such as every 60 seconds) or call the revalidatePath method as needed to regenerate.
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 a fully static site. Configured as static export mode, 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 fully render before sending it all at once. This can distinctly improve user experience, particularly in cases of slow data access or complex webpages.
Example 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 streams rendering */}</Suspense><Suspense fallback={<p>Loading weather...</p>}><Weather /></Suspense></section>);}
PostFeed and Weather can stream rendering independently. If one is slow, another won't block.