如何在 Next.js 中将数据从一个页面传递到另一个页面？

Question

我遇到了将数据从 next.js 中的一个页面传递到另一个页面的问题，因为我正在构建一个基本的新闻应用程序，在该应用程序中我从新闻 api 获取 get 请求，并且获得了 10 篇文章的结果，并且我正确地映射了它们，但是我想将单篇文章日期传递到名为 singleNews 的新页面。那么我该怎么做呢？这是我获取所有 10 篇文章的地方：

export default function news({data}) {
    // const randomNumber = (rangeLast) => {
    //   return  Math.floor(Math.random()*rangeLast)
    // }
    // console.log(data)

    return (
        <>
        <div>
            <h1 className="heading">Top Techcrunch Headlines!</h1>
        </div>
        <div className={styles.newsPage}>
            { // here you always have to check if the array exist by optional chaining
             data.articles?.map(
                (current, index) => {
                    return(
                        <Card datas={current} key={index+current.author} imageSrc={current.urlToImage} title={current.title} author={current.author}/>
                    )
                }
            )
        }
        </div>
        </>
    )
}

export async function getStaticProps() {
    const response = await fetch(`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${process.env.NEWS_API_KEY}&pageSize=12`)
    const data = await response.json() // by default Article length is 104
    // const articles =  data.articles;

    return{
        props : {
            data,
        }
    }
}

Answer 1

您可以通过Link组件将数据传递到另一个页面，如下所示：

import Link from 'next/link'

<Link
  href={{
    pathname: '/to-your-other-page',
    query: data // the data
  }}
>
  <a>Some text</a>   
</Link>

然后使用以下命令在您的其他页面中接收该数据router：

import { useRouter } from 'next/router'
const router = useRouter();
const data = router.query;

这也称为将状态放入 URL。

更新 - Next.js v13+：

Next.js 添加了一个新的应用程序目录功能，默认情况下使用React Server 组件。从 Next.js v13.4.1 开始app目录现已稳定，并且是使用该框架的推荐方式。

Link对组件和挂钩进行了一些更改useRouter。此外，还添加了一些新的挂钩供客户端使用。这些变化的简要列表：

• 不再需要用组件包装a标签Link。新Link组件扩展了 HTML<a>元素。<a>标签属性可以作为 props 添加Link。例如，className或target="_blank"。这些将被转发到渲染时的底层<a>元素。

• 新的useRouter钩子应该从而next/navigation不是导入next/router。

• 查询对象已被删除并被useSearchParams()取代。

app使用目录功能和服务器组件将数据从一个页面传递到另一页面：

import Link from 'next/link'

const SomePage = () => {
  return (
    <section>
      <h1>Some page</h1>
      <Link
        href={{
          pathname: '/anotherpage',
          query: {
            search: 'search'
          }
        }}
      >
        Go to another page
      </Link>
    </section>
  )
}

export default SomePage

通过prop接收数据searchParams：

const AnotherPage = ({ searchParams }) => {
  console.log(searchParams.search) // Logs "search"

  ...
}

export default AnotherPage

在客户端组件上：

'use client'

import { useSearchParams } from 'next/navigation'

const SomeClientComponent = () => {
  const searchParams = useSearchParams()
  console.log(searchParams.get('search')) // Logs "search"
 
  ...
}

export default SomeClientComponent

这也适用于pages文件夹上的页面组件。'use client'在这种情况下，请勿包含该指令。