Creating layouts and pages on Next.js

Creating layouts and pages on Next.js is very crucial in User Interface and Experience . From setting up dashboard routes to understanding the intricacies of nested layouts, we will cover everything you need to know to create efficient and organized web applications.

Table of content

• Introduction
• Create the Dashboard Routes Using File-System Routing
• Creating the Dashboard Page
• Practice: Creating More Dashboard Pages
• Creating the Dashboard Layout
• Partial Rendering and Root Layout
• Understanding Colocation
• Folder Structure
• Creating layouts and pages on Next.js – Nested Layout for Multiple Dashboard Pages
• Conclusion
• FAQs
• Suggested Links

Introduction

Next.js 14 introduces several powerful features that make building web applications more intuitive and efficient. Among these features, the ability to create layouts and pages using a file-system-based routing system stands out. This guide will walk you through the steps of creating and managing routes, understanding the role of folders and files, and implementing nested layouts in your Next.js projects.

Create the Dashboard Routes Using File-System Routing

In Next.js, file-system routing allows you to create routes by simply adding files and folders to the pages or app directory. Each folder represents a route segment that maps directly to a URL segment. This system is intuitive and helps maintain a clean and organized project structure.

Diagram: How Folders Map to URL Segments

Consider the following structure:

/app
  /dashboard
    /customers
    /invoices
  /page.tsx

Here, /dashboard, /dashboard/customers, and /dashboard/invoices map to /dashboard, /dashboard/customers, and /dashboard/invoices URLs, respectively.

Creating the Dashboard Page

To create a new route, you need to add a new folder and a page.tsx file within the app directory. For instance, to create a dashboard page, follow these steps:

• Create a folder named dashboard inside the app directory.
• Inside the dashboard folder, create a file named page.tsx with the following content:

// /app/dashboard/page.tsx

export default function Page() {
  return <p>Dashboard Page</p>;
}

• Run your development server and navigate to http://localhost:3000/dashboard. You should see the “Dashboard Page” text.

This is the basic method to create different pages in Next.js. Each new route segment corresponds to a new folder, and the route is made accessible by the presence of a page.tsx file.

Practice: Creating More Dashboard Pages

Let’s create more pages within the dashboard, such as a Customers page and an Invoices page.

Customers Page

• Create a customers folder inside the dashboard directory.
• Inside the customers folder, create a page.tsx file with the following content:
  

// /app/dashboard/customers/page.tsx

export default function Page() {
  return <p>Customers Page</p>;
}

Invoices Page

• Create an invoices folder inside the dashboard directory.
• Inside the invoices folder, create a page.tsx file with the following content:
  

// /app/dashboard/invoices/page.tsx

export default function Page() {
  return <p>Invoices Page</p>;
}

With these steps, you should now have two additional pages accessible at http://localhost:3000/dashboard/customers and http://localhost:3000/dashboard/invoices.

Creating the Dashboard Layout

Layouts in Next.js allow you to share UI components across multiple pages. This is particularly useful for creating consistent navigation, headers, or footers. Let’s create a layout for the dashboard pages.

• Inside the dashboard folder, create a layout.tsx file with the following content:
  

// /app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

This layout component imports a SideNav component and wraps the children prop, which represents the nested pages. When you navigate to any page within the dashboard route, this layout will be used.

Partial Rendering and Root Layout

One of the benefits of using layouts in Next.js is partial rendering. This means that only the content within the page component updates on navigation, while the layout remains the same. This approach enhances performance and provides a smoother user experience.

Root Layout

The root layout is a special layout that applies to all pages in your application. It is defined in /app/layout.tsx and typically includes global styles, fonts, and metadata.

Example:

This root layout ensures that certain styles and settings are consistent across all pages in your application.

// /app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

Understanding Colocation

Colocation refers to the practice of keeping related code together. In Next.js, you can colocate UI components, test files, and other related code with your routes. This approach improves maintainability and makes it easier to navigate your codebase.

Folder Structure

Here is a sample folder structure for a Next.js application with a dashboard:

/app
  /dashboard
    /customers
      page.tsx
    /invoices
      page.tsx
    layout.tsx
  /page.tsx
  /layout.tsx
  /ui
    /dashboard
      sidenav.tsx
    global.css
    fonts.tsx

This structure demonstrates how you can organize your routes, components, and layouts for a clean and maintainable project.

Creating layouts and pages on Next.js – Nested Layout for Multiple Dashboard Pages

To create a nested layout that can be shared between multiple dashboard pages, you can utilize the layout.tsx file as shown earlier. This layout will act as a parent to all pages within the dashboard directory.

Diagram: Nested Routing

Consider the following structure to understand nested routing:

/app
  /dashboard
    layout.tsx
    page.tsx
    /customers
      page.tsx
    /invoices
      page.tsx

In this example, the layout.tsx file within the dashboard directory will wrap the customers and invoices pages, providing a consistent navigation layout.

Conclusion

Creating layouts and pages in Next.js 14 is a straightforward process thanks to its file-system routing and layout features. By organizing your routes into folders and leveraging layout.tsx files, you can create maintainable and efficient web applications. This guide has covered the essentials of setting up routes, creating nested layouts, and understanding key concepts like colocation and partial rendering. By following these practices, you can build robust and scalable applications with Next.js 14.

FAQs

Suggested Links

Next topics:

Read next blog to create next.js app Navigating Between Pages in Next.js

References:

• Next.js Documentation
• ReactJs Documentation