Next.js 15 Tutorial - 5 - Routing

Summary

This video provides a comprehensive introduction to Next.js's file-based routing system. It explains how routing in Next.js is determined by the organization of files and folders within the app directory, following three key conventions: all routes must be inside the app folder, files must be named `page.js` or `page.tsx`, and folders represent segments of the URL path. Practical examples are shown, including how to create a homepage, an About page, and a Profile page. The video emphasizes Next.js's philosophy of using conventions over configuration, making routing simple and efficient.

Takeaways

• 😀 Next.js uses a file-based routing system where URLs are determined by how you organize files and folders in your code.
• 😀 Routes must reside in the 'app' folder, and files must be named 'page.js' or 'page.tsx' for TypeScript projects to be recognized as routes.
• 😀 Each folder in the 'app' directory represents a segment of the URL path, directly mapping folder names to URL segments.
• 😀 The root route (localhost:3000) is mapped to the 'page.tsx' file located directly inside the 'app' folder.
• 😀 The default layout.tsx file is automatically created when accessing the root route in Next.js, even if the file is deleted initially.
• 😀 To create additional routes, simply create new folders within the 'app' folder, each containing a 'page.tsx' file for that route.
• 😀 The 'about' route can be created by adding a folder named 'about' with a 'page.tsx' file inside it, which maps to localhost:3000/about.
• 😀 Similarly, the 'profile' route can be created by adding a folder named 'profile' with a 'page.tsx' file inside it, mapping to localhost:3000/profile.
• 😀 When navigating to an unrecognized route, such as localhost:3000/dashboard, Next.js automatically returns a 404 'Not Found' page.
• 😀 Next.js's file-based routing eliminates the need to manually install or configure a router, simplifying routing setup and maintenance.

Q & A

What is the core feature of Next.js routing discussed in this script?

The core feature of Next.js routing discussed is its file-system-based routing, where the file and folder structure in the `app` directory determines the URL paths in the browser.

What happens when you create a `page.tsx` file inside the `app` folder?

When a `page.tsx` file is created inside the `app` folder, it automatically becomes available as a route at the root URL of the application (e.g., `localhost:3000`).

What are the three main conventions to follow when working with Next.js routing?

The three main conventions are: 1) All routes must live inside the `app` folder. 2) Route files must be named `page.tsx` or `page.js` (depending on whether you're using TypeScript). 3) Each folder represents a segment of the URL path.

What does creating a new folder inside the `app` directory do in Next.js routing?

Creating a new folder inside the `app` directory represents a segment in the URL path. For example, `app/about` creates a route at `localhost:3000/about`.

How does Next.js handle routing when a user visits a non-existent route?

Next.js automatically serves a 404 Not Found error when a user tries to visit a non-existent route without needing any special code to handle it.

What is the role of the `layout.tsx` file in Next.js routing?

The `layout.tsx` file in Next.js is automatically created behind the scenes and is responsible for rendering layout elements across pages, but it is not explicitly mentioned in the script as part of the initial setup.

How does Next.js simplify routing compared to traditional routing systems?

Next.js simplifies routing by removing the need for manual router setup. The folder and file structure inside the `app` directory automatically handles the routing, following conventions over configuration.

What would be the result of accessing `localhost:3000/dashboard` if no such route exists?

If no route exists for `localhost:3000/dashboard`, Next.js will automatically display a 404 Not Found page.

What is the significance of the `app` folder in Next.js routing?

The `app` folder is crucial in Next.js routing as it contains all route definitions. Files within this folder directly correlate to the URL paths of the application.

Why is Next.js's routing system considered a good example of the 'convention over configuration' philosophy?

Next.js's routing system follows the 'convention over configuration' philosophy because it automatically maps routes based on the file and folder structure, eliminating the need for manual configuration or complex routing setups.