Next.js Parallel Routes: A Learning Template

Welcome! You are viewing an open, public template designed to provide a foundational understanding of Parallel Routes in Next.js.

About This Project

At first glance, understanding the mechanics of parallel routing can be challenging, especially within a large, integrated application. This repository was created to simplify the learning process. It isolates the Parallel Routes feature from any complex integrations, allowing you to focus purely on how they work[2].

This template is a simplified version derived from our main project, aifa.dev. The full application, available on the main branch of the aifa-agi/aifa repository, features deep integrations with an AI Chat SDK, NextAuth.js, database management, and more[2]. By using this template first, you can grasp the core concepts before diving into a more complex codebase.

What You'll Learn

This project is a sandbox for you to explore:

• How Parallel Routes are structured and rendered simultaneously within a single layout[2]
• The crucial difference between cold and hot reloads and how they affect the UI and state persistence
• The role of the default.js file in rendering content when Next.js cannot match a route segment during a hard navigation (full page reload)

We highly recommend reading the official Next.js documentation on Parallel Routes alongside your experiments to deepen your understanding.

Getting Started

Fork this repository or clone it to your local machine to start experimenting.

1. Clone the repository:

   git clone https://github.com/aifa-agi/aifa-parallel-routes-starter.git
   

2. Navigate to the project directory:

   cd aifa-parallel-routes-starter
   

3. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   

4. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   

Now, open http://localhost:3000 in your browser and start exploring!

A Note on Reloads

As you experiment, pay close attention to the behavior of the application during:

• Hot Reloads (Soft Navigation): Changes you make while navigating between pages or when the development server recompiles. The state of inactive parallel routes should be preserved.
• Cold Reloads (Hard Navigation): Manually refreshing the page in your browser (F5 or Cmd+R). This is where you will see default.js in action if a parallel route slot doesn't match the current URL.

Good luck with your learning and coding journey!

---

If you found this project helpful, please consider giving it a star! ⭐ It helps us know that our work is valued and encourages further development.