javascript - getStaticPaths 上的 Next.js 预呈现错误

Question

我正在构建一个 Next.js 应用程序。这是我的文件结构:

cpanearme
 -components
   -listitem.js
 -pages
    -home
       -index.js
     -firm
        -[id].js

这是推送到动态路由的列表项的代码:

     <a className='lead'
      onClick={() => {
        router.push({
          pathname: `/firm/${firm.id}`,
          query: { data: firm.id},
        })
      }}
    >View Their Profile and Reviews</a>   

这是整个动态页面

import { withRouter } from 'next/router'
import Image from 'next/image'
import Link from 'next/link'
import StickyNavbar from '../../components/StickyNavbar'
import ReviewItem from "../../components/ReviewItem"
import Footer from '../../components/Footer'
import path from "path"
import fs from "fs"

const Profile = (props) => {
  const firm = props.firms[0].filter(firm => firm.id === props.router.query.id)[0]

    return (
        <div>
            <StickyNavbar/>
            <div className='container ' style={{backgroundColor:'#b0bec5'}}>
                <h3 className='text-primary'>{firm.name}</h3>
                <i>Founded {firm.years} ago</i>
     
                <div className="grid-3a">
                    <div className="card p-3">
                        Conact Info:<br/>  
                        {firm.address} <br/>
                        {firm.city}, {firm.state} <br/>
                        {firm.email} <br/>
                        {firm.phone}<br/>
                    </div>
                    <div>
                        <h3 className='lead text-primary text-center'>About this company:</h3><br/>
                        <p style={{textIndent:'10px'}} className='py-1'>{firm.profileCopy}</p>
                      </div>
                      <div>
                          <br/>
                          <br/>
                         On The Web: <br/>
                         <a href={firm.website} className='lead' >Their Site</a> <br/> 
                         <a href={firm.bbb} className='lead' >Their BBB</a>  
                      </div>
                </div>
                <br/>
                <div > <h3 className='text-center text-primary lead'> Meet The CPA </h3><br/>
                       <h4 className='text-center text-secondary lead'>{firm.cpa}</h4>
                        <div className='all-center round-img'>
                            <Image
            src={firm.cpapic}
            alt='Tax Expert CPA'
            className='round-img'
              width= "100px"
              height= "100px"
         
 
          /> </div> 
          <div className="mx-3">
              <p style={{textIndent:'10px'}}>{firm.cpabio}</p>
              </div>   
                
                </div>

        <br/>
        <br/>
                <div>
                   <h3 className='text-center text-primary lead'>Pros and Cons</h3>
                    <div className="grid-2">
                        <div className='card all-center'>Pros: <br/>
                        <ul>{firm.pros.map(pro=> (<li><i class="fas fa-plus"></i>{' '}{pro}</li>))}</ul>
                        </div>
                        <div className='card all-center'>Cons: <br/>
                        <ul>{firm.cons.map(con=> (<li><i class="fas fa-minus"></i>{' '}{con}</li>))}</ul>
                        </div>
                    </div>
                    </div>
<br/>
<br/>
                 <div><h3 className='text-center text-primary lead'>Services offered</h3> 
                    <div className="grid-3">
                        <div className='card'>Federal Tax : <br/>
                        <ul>{firm.services.federal.map(fed=> (<li><i class="fas fa-check"></i>{' '}{fed}</li>))}</ul>
                        </div>
                        <div className='card'>State Tax: <br/>
                        <ul>{firm.services.state.map(state=> (<li><i class="fas fa-check"></i>{' '}{state}</li>))}</ul>
                        </div>
                        <div className='card'>Accounting: <br/>
                        <ul>{firm.services.accounting.map(account=> (<li><i class="fas fa-check"></i>{' '}{account}</li>))}</ul>
                        </div>
                    </div>
                 </div>          
  <br/>
  <br/>
              <div>
                  <h3 className='text-center text-primary lead'>More About Their Fees:</h3>
                  
                    
   
                  <div className='text-center'> 
                  <h3>Pricing Information</h3>         
                     Minimum Debt: {firm.minimum} <br/>
                     Average Fees: {firm.cost} <br/>
                     Exploration Cost: {firm.exploration} <br/>
                     Average Client Savings: {firm.avgsavings}</div>
                
                  <p style={{textIndent:'10px'}}>{firm.fees}</p>
              </div>
<br/>
 <br/>                         <div>
                  <h3 className='text-center text-primary lead'>Read Real Customer Reviews:</h3>
                  <div className='all-center'>
                  {firm.reviews.map((review,i)=> (<ReviewItem review={review} key={i}/>))}
                  </div>
              </div>
            </div> 
            <Footer/>
        </div>
    )
  }

export default withRouter(Profile)

export async function getStaticPaths() {

    const postsDirectory = path.join(process.cwd(), 'firms')
    const filenames = fs.readdirSync(postsDirectory)

    const firms = filenames.map((filename) => {
    const filePath = path.join(postsDirectory, filename)
    const firms =  JSON.parse(fs.readFileSync(filePath, 'utf8'))

    // Generally you would parse/transform the contents
    // For example you can transform markdown to HTML here

    return firms
    
  })

  return {
   paths: firms[0].map(firm =>({ params: { id: firm.id}})), //firms[0].map(firm => { params: { id: firm.id}}),
   fallback: true // See the "fallback" section below
  };
}

export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const postsDirectory = path.join(process.cwd(), 'firms')
  const filenames = fs.readdirSync(postsDirectory)


  const firms = filenames.map((filename) => {
    const filePath = path.join(postsDirectory, filename)
    const firms =  JSON.parse(fs.readFileSync(filePath, 'utf8'))

    // Generally you would parse/transform the contents
    // For example you can transform markdown to HTML here

    return firms
    
  })

  
  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      firms,
    },
  }
}

我正处于构建阶段，在设置 getStaticPaths 后遇到以下错误。我不知道如何用谷歌搜索这个确切的错误。

Error: Export encountered errors on following paths:
        /firm/[id]
        /taxfaqs/[id]

它成功地预渲染了通过 get static Prop 传递的所有内容，但我不知道如何告诉构建 [id] 不是需要检查的东西。

是 [...id] 吗？

Answer 1

关于 getStaticPaths 和 getStaticProps 的工作方式似乎有些困惑。

getStaticPaths 用于动态路由(如您的 /firm/[id])，以定义必须在构建时呈现为 HTML 的路径列表时间。这意味着您需要从中返回该路由的可能路径数组。

// Generates `firm/firm1` and `firm/firm2` paths at build time
export async function getStaticPaths() {
    return {
        paths: [
            { params: { id: 'firm1' } },
            { params: { id: 'firm2' } }
        ],
        fallback: true
    };
}

getStaticProps 将在构建时根据 getStaticPaths 返回的路径为每个页面生成 Prop 。

// Generates the props for given path at build time
export async function getStaticProps({ params }) {
    // Add your own logic to retrieve the data for given path and pass it to `firm`
    // If the route is like `/firm/firm1`, then params.id is `firm1`
    return {
        props: {
            firm
        }
    };
}

最后，在您的页面组件中，您可以访问从 props 传递的数据。

const Profile = ({ firm }) => {
    // `firm` will contain the data for a given path
}