如何将 Post Item ID 传递给 getInitialProps？

Posted 2023-02-25

【中文标题】如何将 Post Item ID 传递给 getInitialProps？

【英文标题】：How do I pass the Post Item ID into getInitialProps?

【发布时间】：2019-05-24 19:53:32

【问题描述】：

我是 Next.js 的新手，无法将帖子 ID 从索引页面传递到帖子页面的 getInitialProps() 函数。正在使用 Link 组件请求页面。

最终目标是将帖子 ID 获取到 post.js 的 getInitialProps 函数中，以便请求正确的 json 文件，如下所示：

https://www.example.com/menu/100.json

JSON API 端点都在浏览器中正常工作，索引页面在 nextjs 中工作。

到目前为止，我已经尝试了几个打印语句来查找此 Link href 属性被传递的位置，但我还不能访问 href 中的“itemid”。

有 3 个主要文件可以重现此内容：

index.js

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) => (
  <Layout>
    <h1>Pages</h1>
    <ul>
props.results.map(result => (
        <li key=result.id>
          <Link as=`/$result.slug` href=`/post?itemid=$result.id`>
            <a>result.title</a>
          </Link>
        </li>
      ))
    </ul>
  </Layout>
)

Index.getInitialProps = async function() 
  const res = await fetch('https://www.example.com/menu.json')
  const data = await res.json()

  return 
    results: data['data'].map(data => data)
  


export default Index

server.js

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next( dev )
const handle = app.getRequestHandler()

app
  .prepare()
  .then(() => 
    const server = express()

    server.get('/:id*', (req, res) => 
      const actualPage = '/post'
      const queryParams =  slug: req.params.id + req.params[0]
      app.render(req, res, actualPage, queryParams)
    )


    server.get('*', (req, res) => 
      return handle(req, res)
    )

    server.listen(3000, err => 
      if (err) throw err
      console.log('> Ready on http://localhost:3000')
    )
  )
  .catch(ex => 
    console.error(ex.stack)
    process.exit(1)
  )

post.js

import  withRouter  from 'next/router'
import Layout from '../components/MyLayout.js'
import fetch from 'isomorphic-unfetch'

const Post = props => (
  <Layout>
    <h1>props.result.title</h1>
    <p>props.result.bodyCopy.replace(/<[/]?p>/g, '')</p>
    <img src=props.result.image />
  </Layout>
)

Post.getInitialProps = async function(context) 
  const  itemid  = context.query

  const res = await fetch(`https://www.example.com/menu/$itemid.json`)
  const result = await res.json()

  return  result 


export default withRouter(Post)

这是我希望发生的事情：

用户请求：https://www.example.com/some-page “some-page”的帖子 ID 为 100

服务器在请求/刷新的页面上同时获得“some-page”和“100”。

服务器调用 API 到：https://www.example.com/menu/100.json

到目前为止，我得到的最好结果是将 API url 设置为：

https://www.example.com/menu/some-page.json

此端点无效，因为 ID 未请求它。

【参考方案1】：

请试一试这是否符合您的预期？

索引.js

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) => (
  <Layout>
    <h1>Pages</h1>
    <ul>
props.results.map(result => (
        <li key=result.id>
          <Link as=`/$result.slug/$result.id` href=`/post?itemid=$result.id`>
            <a>result.title</a>
          </Link>
        </li>
      ))
    </ul>
  </Layout>
)

Index.getInitialProps = async function() 
  const res = await fetch('https://www.example.com/menu.json')
  const data = await res.json()

  return 
    results: data['data'].map(data => data)
  


export default Index

Server.js

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next( dev )
const handle = app.getRequestHandler()

app
  .prepare()
  .then(() => 
    const server = express()

    server.get('/:slug/:id*', (req, res) => 
      const actualPage = '/post'
      const queryParams =  slug: req.params.slug, itemid: req.params.id 
      app.render(req, res, actualPage, queryParams)
    )


    server.get('*', (req, res) => 
      return handle(req, res)
    )

    server.listen(3000, err => 
      if (err) throw err
      console.log('> Ready on http://localhost:3000')
    )
  )
  .catch(ex => 
    console.error(ex.stack)
    process.exit(1)
  )

Post.js

import  withRouter  from 'next/router'
import Layout from '../components/MyLayout.js'
import fetch from 'isomorphic-unfetch'

const Post = props => (
  <Layout>
    <h1>props.result.title</h1>
    <p>props.result.bodyCopy.replace(/<[/]?p>/g, '')</p>
    <img src=props.result.image />
  </Layout>
)

Post.getInitialProps = async function(context) 
  const  itemid  = context.query

  const res = await fetch(`https://www.example.com/menu/$itemid.json`)
  const result = await res.json()

  return  result 


export default withRouter(Post)