Guides

Before App Router, Next.js relied on the Pages Router ("pages/" directory) as its routing system. While simple and intuitive, it gradually revealed limitations as applications grew in complexity:In 2022, with React 18 introducing Server Components, the Next.js team saw an opportunity to reimagine the routing system. Thus, App Router was born.This represents the most fundamental paradigm shift. In App Router:

Ethan Mercer

This guide focuses on building high-performance Next.js full-stack applications and optimizing your development workflow without compromising code quality or application speed.In the upcoming sections, we'll thoroughly examine project architecture, environment configuration, routing strategies, and efficient data fetching techniques. These best practices will enable you to deploy Next.js full-stack applications seamlessly on EdgeOne Pages, harnessing edge computing power for superior performance and worldwide accessibility.The following directory structure represents our recommended Next.js hybrid rendering template. This carefully organized architecture serves as an optimal foundation for developers building scalable full-stack applications:

Ethan Mercer

Cloud Functions is EdgeOne's comprehensive serverless function solution designed to empower developers with seamless dynamic backend capabilities. Simply by creating Cloud functions within your project's node-functions directory, your code will be automatically transformed into powerful Node.js-based API endpoints.. These endpoints can efficiently handle a wide range of backend operations including database queries, third-party API integrations, form submissions, and data processing tasks—all while eliminating the complexity of server management. This serverless approach makes Cloud Functions the perfect foundation for building scalable, modern applications.Experience true full-stack development with unified frontend and backend code management. House your frontend static assets and backend function logic within a single Git repository, seamlessly sharing configurations, environment variables, and deployment pipelines. Deploy your entire application stack with just one "git push" command, dramatically streamlining your development workflow while minimizing operational overhead and maintenance complexity.

Ethan Mercer

This guide will help you quickly get started with the file upload system built based on AWS S3 and Next.js in EdgeOne Pages.Deploying with EdgeOne Pages templates is the fastest way to build and deploy AWS S3 projects from scratch. You can quickly find the AWS S3 Batch Uploader theme template in the template market of pages to start deploying. 

Ethan Mercer

Cross-Origin Resource Sharing (CORS) is a security mechanism implemented by browsers to control how web applications interact with resources from different origins. By default, the same-origin policy restricts web pages from making requests to servers other than their own domain. CORS relaxes these restrictions by allowing servers to specify, via HTTP headers, which origins are permitted to access their resources.When a request is considered a "non-simple request" (such as those using custom headers or methods other than GET/POST), the browser automatically sends a preflight OPTIONS request to the server. The server must return the appropriate CORS headers; otherwise, the browser will block the actual request.Pages Functions provide a serverless code execution environment running on EdgeOne edge nodes. Developers only need to write business logic and configure trigger rules—no server infrastructure management is required. Code executes elastically and securely at edge nodes close to end users.

Benjamin Carter

One of EdgeOne Pages advanced features is the ability to act as a reverse proxy, allowing you to forward client requests to your backend servers securely and efficiently. This article will guide you through the process of configuring EdgeOne Pages as a reverse proxy using the edgeone.json configuration file.EdgeOne Pages provides the “edgeone.json” configuration file to customize project build and deployment behaviors (such as build commands) and manage routing strategies (including redirects, rewrites, and HTTP response headers).Rewrites allow you to transparently route user requests to different URLs without changing the visible URL in the browser. With rewrites, you can modify the URL path, query parameters, and request headers before the request reaches your backend server.

Ethan Mercer