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:
Import a Next.js project from a Git repository
Select a Next.js template from the Pages template library
Use the following Next.js sample project
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. The platform will support additional 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 | ✅ |
Proxy | ✅ |
Experimental framework features | Partially supported |
Redirects and rewrites | Currently not supported for Next.js rewrite and redirection. The platform recommends using edgeone.json to configure where possible. 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:
The revalidatePath method is currently an experimental feature and may not be completely 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, modify next.config.js as in the following example:
/** @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.
Middleware
Next.js middleware is code that executes before request arrival at a webpage or API routing. By default, it runs in Edge Runtime environment, allowing you to intercept, modify and response before request completion.
Pages provides optimized support for Next.js middleware. You can easily create and use middleware, with usage methods and grammar consistent with Next.js. See Next.js Proxy.
The core capabilities of middleware include:
Request rewrite (Rewrite): Transparently forward the request to another URL while keeping the address bar in the user's browser unchanged.
Redirect (Redirect): Perform user redirection to a new URL.
Modify request/response headers: Add, modify, or delete HTTP header information.
Direct response: Return the response content directly without going through the backend.
Read and set Cookie: Handle user sessions and authentication status.
You can use middleware in the following typical scenarios:
1. Identity Verification and Authorization: Check the user login status and redirect unlogged-in users to the login page.
2. A/B Testing: Direct users to different versions of the webpage based on conditions.
3. Internationalization (i18n): Rewrite to the corresponding language page according to the user language preference.
4. Bot Detection and Prevention: Identify and block malicious crawlers or bots.
5. Request Log and Monitoring: Record request information for analysis and debugging.
6. Feature Flags: Dynamically control feature visibility based on feature switch.
If you need to use middleware in a non-full-stack framework, the platform offers a common middleware service.
