During recent breakout sessions at Symposium, Sitecore hinted at the possibility of future support for Next.js App Router. While this isn’t an official announcement or commitment, it suggests an important direction for developers working with Sitecore and Next.js to consider. Whether you’re preparing for potential future changes or simply staying ahead of the curve, understanding both routing systems will help you make informed decisions about your Next.js applications.

Page Router: The Traditional Approach

The Page Router, introduced with Next.js’s initial release, follows a file-system based routing mechanism that’s straightforward and intuitive.

Key Characteristics of Page Router

1. File-System Based Routing
   • Pages are placed in the /pages directory
   • Files automatically become routes (e.g., pages/about.js → /about)
   • Dynamic routes use bracket syntax (e.g., pages/posts/[id].js)
2. Router Handling
3. Data Fetching Methods
   • getStaticProps for static generation
   • getServerSideProps for server-side rendering
   • getInitialProps for legacy applications

// pages/posts/[id].js
export default function Post({ post }) {
  return <h1>{post.title}</h1>
}

export async function getServerSideProps({ params }) {
  const { id } = params
  // Fetch data
  return { props: { post } }
}

App Router: The Modern Approach

The App Router, introduced in Next.js 13, represents a paradigm shift in how routing and layouts are handled, embracing React’s Server Components by default.

Key Characteristics of App Router

1. Directory-Based Organization
   • Routes are placed in the /app directory
   • Uses folders for routing instead of files
   • Special files like page.js, layout.js, and loading.js serve specific purposes
2. Server Components by Default jsx
3. Advanced Features
   • Nested layouts
   • Route groups
   • Parallel routes
   • Intercepting routes
   • Server-side data fetching with async components

// app/posts/[id]/page.js
async function Post({ params }) {
  const post = await fetchPost(params.id)
  return <h1>{post.title}</h1>
}

Key Differences

1. Component Model

Page Router:

• Client-side components by default
• Requires explicit server-side data fetching
• Uses higher-order functions for data fetching

App Router:

• Server Components by default
• Built-in async component support
• More efficient client-side JavaScript

2. Data Fetching

Page Router:

jsxCopy// pages/posts.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()
  return { props: { posts } }
}

App Router:

jsxCopy// app/posts/page.js
async function Posts() {
  const posts = await fetch('https://api.example.com/posts')
  return <PostList posts={posts} />
}

3. Layouts

Page Router:

• Uses _app.js and _document.js for global layouts
• Requires manual implementation of nested layouts

App Router:

• Uses layout.js files for nested layouts
• Automatically maintains state between layout changes
• More efficient partial rendering

When to Use Each?

Choose Page Router When:

• Working with an existing Next.js application
• Need simpler, more straightforward routing
• Require widespread third-party package compatibility
• Want a more mature, battle-tested system

Choose App Router When:

• Starting a new project
• Need advanced routing features
• Want to leverage Server Components
• Require better performance optimization
• Need built-in support for nested layouts
• Want to future-proof your application

Migration Considerations

If you’re considering migrating from Page Router to App Router:

1. Gradual Migration
   • Both routing systems can coexist
   • Migrate routes incrementally
   • Use the pages directory for legacy routes
2. Key Changes Required
   • Convert data fetching methods
   • Update layout implementation
   • Adapt to Server Components
   • Modify client-side navigation logic

Conclusion

With Sitecore showing interest in potentially supporting App Router, understanding these routing systems is becoming increasingly relevant for Sitecore developers. While no official commitments have been made, these early signals from Sitecore suggest that familiarizing yourself with the App Router could be valuable for future development.

Whether you’re currently using Sitecore with Next.js Page Router or planning future projects, the App Router’s enhanced features make it a compelling choice to consider for new development. While the Page Router remains viable for existing applications, the App Router’s advantages in performance, developer experience, and architectural capabilities—combined with potential future Sitecore support—make it worth exploring for modern web development with Next.js.

Remember that both systems are well-supported by Next.js, and you can even use them together during a gradual migration. As the ecosystem continues to evolve, now is a good time to understand these differences and consider how they might impact your development approach in the future.