Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • Next.js Tutorial
  • Next.js Components
  • Next.js Functions
  • Next.js Deployment
  • Next.js Projects
  • Next.js Routing
  • Next.js Styles
  • Next.js Server-Side Rendering
  • Next.js Environment Variables
  • Next.js Middleware
  • Next.js Typescript
  • Next.js Image Optimization
  • Next.js Data Fetching
Open In App
Next Article:
How to Get URL pathname in Next.js?
Next article icon

How to Share Data Between Pages in Next.js?

Last Updated : 24 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Sharing data between pages in Next.js can be crucial for maintaining state and passing information efficiently. You can achieve this with the help of URL parameters. In this article, we will learn about how to share data between pages in next.js

Approach to Share Data Between Pages

  • Use the Link component from Next.js and pass an href prop containing an object with pathname and query properties.
  • Set the pathname to the target page's route and the query to an object with the data you want to share.
  • In the target page component, use the useRouter hook from 'next/router' to access the router object.
  • Extract the data from the query object within the target page component.
  • Test the navigation and data access to ensure the query parameters are correctly passed and retrieved.

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer a few questions.

npx create-next-app@latest app_name

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No √ Would you like to use ESLint? ... Yes √ Would you like to use Tailwind CSS? ... No √ Would you like to use `src/` directory? ... Yes √ Would you like to use App Router?  ... Yes √ Would you like to customize the default import alias (@/*)? ... No

Step 3: After creating your project folder, move to it using the following command.

cd app_name

Project Structure:

data-sharing

The updated dependencies in package.json file will look like:

"dependencies": {     "react": "^18",     "react-dom": "^18",     "next": "14.2.3" }, "devDependencies": {     "postcss": "^8",     "tailwindcss": "^3.4.1" }

Example: This example demonstrates how to pass the data between pages in next.js with the help of URL parameters

JavaScript 
//File path: src/app/page.js  import Link from "next/link";  export default function Home() {     return (         <>             <h3>                 Sharing data between                 pages | GeeksForGeeks             </h3>             <Link href={{                 pathname: '/about',                 query: { course: ["JavaScript", "Java", "Data Strucutre"] },             }}>                 About Page             </Link>         </>     ); }
JavaScript 
//File path: src/app/about/page.js  export default function Page({ searchParams }) {     const courseList = searchParams.course      return (         <>             <h1>Course List</h1>             <ul>                 {                     courseList.map((course) => {                         return                         <li key={course}>                             {course}                         </li>                     })                 }             </ul>         </>     ) }

Step to Run Application: Run the application using the following command from the root directory of the project

npm run dev

Output: Your project will be shown in the URL http://localhost:3000/


Next Article
How to Get URL pathname in Next.js?
author
jaimin78
Improve
Article Tags :
  • Web Technologies
  • ReactJS
  • Next.js
  • Next.js - Questions

Similar Reads

  • How to Get URL pathname in Next.js?
    Next.js is a powerful React framework that simplifies the process of building server-rendered and statically generated web applications. One common requirement in web development is to get the URL pathname, which can be useful for various purposes such as conditional rendering, routing, and analytic
    3 min read
  • How to add Web Share in Next.js ?
    The Web Share API enables web applications to share content (like URLs, text, or files) to other apps installed on a user's device, such as social media platforms, messaging apps, or email clients. Integrating the Web Share API into a Next.js project enhances user experience by providing a seamless
    2 min read
  • How to share code between files in JavaScript ?
    JavaScript is a powerful and popular programming language that is widely used for web development. One of the key features of JavaScript is its ability to share code between files. This can be useful for organizing large projects, reusing code, and maintaining code quality. In this article, we'll se
    6 min read
  • How To Handle Loading Between Page Changes in NextJS?
    To experience smooth transitions between the pages of your Next.js application, you can include a loading indicator that shows the progress of the page being loaded. This can be done by creating a custom spinner component and using it during page transitions. In this article, we will create a custom
    4 min read
  • Linking between pages in Next.js
    In this article, we are going to see how we can link one page to another in Next.js. Follow the below steps to set up the linking between pages in the Next.js application: To create a new NextJs App run the below command in your terminal: npx create-next-app GFGAfter creating your project folder (i.
    3 min read
  • How To Get Current Route In Next.js?
    Next.js is a popular React framework that makes it easy to build server-side rendered and static web applications. One common task in web development is determining the current route or URL of the page. In Next.js, this can be done using the built-in useRouter hook. This article will guide you throu
    3 min read
  • How to Add Stylesheet in Next.js ?
    In Next.js, adding a stylesheet enhances your app's styling capabilities. Import CSS files directly in your components or pages using ES6 import syntax. Next.js optimizes and includes these styles in the build process, ensuring efficient and modular CSS management. In this post, we are going to lear
    4 min read
  • How to create a Custom Error Page in Next.js ?
    Creating a custom error page in Next.js allows you to provide a better user experience by customizing the appearance and messaging of error pages like 404 and 500. In this post we are going to create a custom error page or a custom 404 page in a Next JS website. What is a custom error page?The 404 p
    2 min read
  • How to Handle a Post Request in Next.js?
    NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about How to handle a post request in NextJS. A
    2 min read
  • How to Disable the ETag Generation in Next.js ?
    ETags (Entity Tags) are a mechanism used by HTTP to validate the cache of resources and improve performance by avoiding unnecessary data transfers. In Next.js, ETags are generated by default for API routes to optimize caching. However, in some cases, you may need to disable ETag generation, such as
    3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences