> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js.md).

# Store Front Framework (Next.js)

This guide is written based on Next.js (16.2.3) and React.js (19.2.3).

### What is Next.js? <a href="#next.js" id="next.js"></a>

Next.js is a React framework for building full-stack web applications. You use React components to build user interfaces, and Next.js for additional features and optimizations.

Under the hood, Next.js also abstracts and automatically configures tooling needed for React, such as bundling, compiling, and more. This lets you focus on building your application instead of spending time on configuration.

Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.

### Key Features <a href="#undefined" id="undefined"></a>

<table><thead><tr><th width="126.2222900390625">Feature</th><th>Description</th></tr></thead><tbody><tr><td>Routing</td><td>A file-system based router built on top of Server Components that supports layouts, nested routing, loading states, error handling, and more.</td></tr><tr><td>Rendering</td><td>Client-side and server-side rendering with Client and Server Components. Further optimized with static and dynamic rendering on the server using Next.js. Streams on the Edge and Node.js runtimes.</td></tr><tr><td>Data Fetching</td><td>Simplifies data fetching using async/await in Server Components, and provides an extended fetch API for request memoization, data caching, and revalidation.</td></tr><tr><td>Styling</td><td>Support for your preferred styling method, including CSS Modules, Tailwind CSS, and CSS-in-JS</td></tr><tr><td>Optimization</td><td>Image, font, and script optimizations to improve your application's Core Web Vitals and user experience.</td></tr><tr><td>TypeScript</td><td>Improved support for TypeScript, with better type checking, more efficient compilation, and custom TypeScript plugins and type checkers.</td></tr></tbody></table>

### App Router vs Pages Router <a href="#app-router-pages-router" id="app-router-pages-router"></a>

Next.js has two routers: the App Router and the Pages Router. The App Router is the newer router that lets you use React's latest features, such as Server Components and Streaming. The Pages Router is the original Next.js router that let you build server-rendered React applications, and it continues to be supported for older Next.js applications.

At the top of the sidebar there is a dropdown menu that lets you switch between App Router and Pages Router features. Since each directory has its own unique features, it's important to keep track of which tab is selected.

The breadcrumbs at the top of the page also indicate whether you are viewing the App Router documentation or the Pages Router documentation.

### How to Use This Document <a href="#undefined" id="undefined"></a>

This document is organized step by step, from easiest to most difficult, around the key components, so that you can set up a Next.js project and follow along hands-on right away. Once you finish the initial installation, data fetching, and state management, you will be able to build a basic web application using Next.js/React.

This document is continuously updated, so feedback from readers is important. Please leave your valuable comments through the comment feature on each page.