Overview of Next.js
Next.js is a React-based framework that supports server-side rendering (SSR) and static site generation (SSG). This enables high performance and excellent SEO.
Sitecore XM Cloud provides a starter kit called Headless SXA, which is based on the Next.js Pages Router. Therefore, when building a website using XM Cloud, Next.js tips are directly applicable.
Main Features
The main features of Next.js are as follows:
- Server-Side Rendering (SSR): Renders pages per request, providing dynamic content.
- Static Site Generation (SSG): Generates pages at build time, providing cacheable static files.
- Incremental Static Regeneration (ISR): Allows dynamic content updates while leveraging the benefits of static site generation (SSG). With ISR, statically generated pages can be regenerated in the background.
- API Routes: Easily create API endpoints and integrate backend functionality.
- Automatic Code Splitting: Loads only the necessary code for each page, reducing initial load time.
- TypeScript Support: Natively supports TypeScript, enabling type-safe development.
Use Cases
The above features are ideal for the following scenarios:
- Websites requiring high performance
- Websites prioritizing SEO
- Web applications providing dynamic content
- Blogs or documentation sites providing static content
For sites with a large amount of content, generating content with SSG for each publication can result in a build occurring every time a page is published. Using ISR allows handling content generation with differences.
By using Next.js, you can build web applications that maximize the benefits of React while providing excellent performance and SEO.
Samples Provided on This Site
All the Next.js-related content introduced here is provided in the following GitHub repository:
Examples
Following content is provided: