Transferring data between pages in Next JS using App Route and Typescript

Question

Transferring data between pages in Next JS using App Route and Typescript

Seeking assistance to extract data from an array on one page and display it on another page. I am working with NextJs, Typescript, and AppRoute.

Code in app/page.tsx:

import Image from 'next/image'
import Link from 'next/link'

const listMember = [
  {
    id: 1,
    name: "name1",
    age: 20,
  },
    {
    id: 2,
    name: "name2",
    age: 18,
  },
    {
    id: 3,
    name: "name3",
    age: 2,
  }
]

export default function HomePage() {
  return (
    <>
      <ul className="px-5">
        {listMember.map(member =>
          <li>
            <Link
              href={{
                pathname: "/Detail",
                query: member.name
              }}>{member.name}</Link>
          </li>
        )}
      </ul>
    </>
  )
}

Code in app/Detail/page.tsx:

import HomePage from "../page";

export default function Detail() {
    return (
        <>
            <h1> 
                This is detail page of {HomePage.listMember.name}
            </h1>
        </>
    )
}

Attempted using route but encountered issues.

typescript next.js next.js13 app-router

Answer 1

Answer №1

If you want to retrieve the list from your main page, start by exporting it:

export const memberList = [
  {
    id: 1,
    name: "John",
    age: 30,
  },
    {
    id: 2,
    name: "Jane",
    age: 25,
  },
    {
    id: 3,
    name: "Mike",
    age: 40,
  }
]

Next, on the detail page, access the query parameter and locate the parameter using this method:

import { useSearchParams } from 'next/navigation'
import HomePage, { memberList } from "../page";

export default function Detail() {
const searchParams = useSearchParams()
const name = searchParams.get('name')

  const member = memberList.find(member => member.name === name);

    return (
        <>
            <h1> 
                Welcome to the detail page of {member?.name}
            </h1>
        </>
    )
}

Answer 2

If you want to retrieve the list from your main page, start by exporting it:

export const memberList = [
  {
    id: 1,
    name: "John",
    age: 30,
  },
    {
    id: 2,
    name: "Jane",
    age: 25,
  },
    {
    id: 3,
    name: "Mike",
    age: 40,
  }
]

Next, on the detail page, access the query parameter and locate the parameter using this method:

import { useSearchParams } from 'next/navigation'
import HomePage, { memberList } from "../page";

export default function Detail() {
const searchParams = useSearchParams()
const name = searchParams.get('name')

  const member = memberList.find(member => member.name === name);

    return (
        <>
            <h1> 
                Welcome to the detail page of {member?.name}
            </h1>
        </>
    )
}

Answer 3

Answer №2

Modify to

export const memberList = [...
...

import {memberList } from "../page";

export default function Detail() {
    return (
        <>
            <h1> 
                Welcome to the detailed page of {memberList.name}
            </h1>
        </>
    )
}

Answer 4

Modify to

export const memberList = [...
...

import {memberList } from "../page";

export default function Detail() {
    return (
        <>
            <h1> 
                Welcome to the detailed page of {memberList.name}
            </h1>
        </>
    )
}

Transferring data between pages in Next JS using App Route and Typescript

Answer №1

Answer №2

Similar questions

Adding dynamic metadata to a specific page in a next.js app using the router

Concealing tab bars on Ionic 2 secondary pages

Tips for resolving a typescript Redux connect error related to ActionCreatorsMapObject

Exploring the power of SCSS modules within Next.js

Angular 2 - retrieve the most recent 5 entries from the database

The functionality of the Request interface appears to be malfunctioning

When executing the release command in Ionic 3, the Angular AoT build encountered a failure

The page could not be generated due to a server error with the syntax. More specifically, an Unexpected token 'export' caused a SyntaxError

What is the best way to convert this into a distinct function using typescript?

React error #425: Timezone formatting causing minification issue

What is the method for transferring properties in next JS?

Set the array as the object attribute

The NextSJ configuration error: Webpack encountering a ModuleParseError due to an unexpected character in the module parsing process

What is the methodology behind incorporating enumerations in typescript?

Configuring modules using Sass, CSS-Modules, Webpack, React, and TypeScript

The TypeScript error "File 'XXX' is not recognized as a module" is preventing successful compilation

Tips for creating a typescript typeguard function for function types

Show the values in the second dropdown menu according to the selection made in the first dropdown menu using Angular 8

Difficulty accessing context.params query in Next.js Dynamic Path

TypeScript: Despite declaring specific types, generic functions still treat parameters as "any"