1. Introduction

In this tutorial, we will explore how to pass data between routes in Next.js, a popular React framework. We will learn how to send data from one route to another using different methods like query parameters and dynamic route segments.

By the end of this tutorial, you will be able to:

• Understand the concept of routing in Next.js.
• Pass data between routes using query parameters.
• Pass data between routes using dynamic route segments.

Prerequisites

• Basic understanding of JavaScript and React.
• Some familiarity with Next.js would be helpful but is not required.

2. Step-by-Step Guide

Concepts

• Routing: This is the method of directing users to different parts of an application when they click on or interact with elements in the application. In Next.js, each file in the pages directory becomes a route.
• Query parameters: These are key-value pairs that are appended to the URL after a '?' character. They allow us to pass non-sensitive data from one route to another.
• Dynamic route segments: These allow us to create routes that depend on some data. In Next.js, we define them by adding brackets [] around the file or folder name in the pages directory.

3. Code Examples

1. Passing data using query parameters

   Suppose we have a route /user and we want to pass the user's name to this route. We can do this using query parameters.

   Below is an example of how to link to the /user route with a query parameter:

   ```jsx
   import Link from 'next/link'

   function HomePage() {
   return (
   

   
   

   Home Page

   
   Go to user's page
   
   
   )
   }

   export default HomePage
   ```

   In the /user route, we can access the name passed in the query parameter like this:

   ```jsx
   import { useRouter } from 'next/router'

   function UserPage() {
   const router = useRouter()

   return (
   

   
   

   User Page

   
   

   Welcome, {router.query.name}

   
   
   
   )
   }

   export default UserPage
   ```

   When we click on the "Go to user's page" link, we'll be directed to the /user route and the webpage will display "Welcome, John".

2. Passing data using dynamic route segments

   Suppose we have a blog and each blog post has a unique id. We can use a dynamic route to display each blog post.

   First, we create a file called [id].js in the pages/posts directory. The [id] part in the filename is the dynamic route segment.

   ```jsx
   import { useRouter } from 'next/router'

   function PostPage() {
   const router = useRouter()

   return (
   

   
   

   Post Page

   
   

   You are viewing post {router.query.id}

   
   
   
   )
   }

   export default PostPage
   ```

   Now, we can link to any post by using its id in the URL. For example, if we link to /posts/42, the webpage will display "You are viewing post 42".

4. Summary

In this tutorial, we have learned how to pass data between routes in Next.js using query parameters and dynamic route segments. This is a crucial aspect of building dynamic and interactive web applications.

For further learning, you can explore:

• How to fetch data in a Next.js page using getServerSideProps or getStaticProps.
• How to handle nested routes in Next.js.

5. Practice Exercises

1. Create a blog with Next.js. Each blog post should have a unique route based on its id. Display the blog post's id on its page.

2. Create a user page that displays a user's name. Pass the user's name to the page using a query parameter.

3. Create a product page that displays a product's name and id. Pass the product's name and id to the page using dynamic route segments and query parameters.

Remember, practice is key when learning new concepts in web development. Happy coding!