Next.js prerendering error on getStaticPaths

Question

I am building a Next.js app. Here is my file structure:

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

Here is the code for a list item that pushes to the dynamic route:

      {
        router.push({
          pathname: `/firm/${firm.id}`,
          query: { data: firm.id},
        })
      }}
    >View Their Profile and Reviews

Here is the entire dynamic page

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 (
        
            
            
                {firm.name}
                Founded {firm.years} ago
     
                
                    
                        Conact Info:
  
                        {firm.address} 

                        {firm.city}, {firm.state} 

                        {firm.email} 

                        {firm.phone}

                    
                    
                        About this company:


                        {firm.profileCopy}
                      
                      
                          

                          

                         On The Web: 

                         Their Site 
 
                         Their BBB  
                      
                
                

                  Meet The CPA 


                       {firm.cpa}
                        
                              
          
              {firm.cpabio}
                 
                
                

        

        

                
                   Pros and Cons
                    
                        Pros: 

                        {firm.pros.map(pro=> ({' '}{pro}
))}
                        
                        Cons: 

                        {firm.cons.map(con=> ({' '}{con}
))}
                        
                    
                    




                 Services offered 
                    
                        Federal Tax : 

                        {firm.services.federal.map(fed=> ({' '}{fed}
))}
                        
                        State Tax: 

                        {firm.services.state.map(state=> ({' '}{state}
))}
                        
                        Accounting: 

                        {firm.services.accounting.map(account=> ({' '}{account}
))}
                        
                    
                           
  

  

              
                  More About Their Fees:
                  
                    
   
                   
                  Pricing Information         
                     Minimum Debt: {firm.minimum} 

                     Average Fees: {firm.cost} 

                     Exploration Cost: {firm.exploration} 

                     Average Client Savings: {firm.avgsavings}
                
                  {firm.fees}
              


 
                         
                  Read Real Customer Reviews:
                  
                  {firm.reviews.map((review,i)=> ())}
                  
              
             
            
        
    )
  }

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,
    },
  }
}

I am in the build phase and I am running into the following error after setting up getStaticPaths. I can't figure out how to Google this exact mistake.

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

It successfully pre-renders everything that is passed with get static props but I don't know how to tell build that [id] isn't a thing that needs to get checked.

Is it [...id]?

user_1870780 · Answer

There seems to be some confusion around how getStaticPaths and getStaticProps work.

getStaticPaths is used, in dynamic routes (like your /firm/[id]), to define the list of paths that have to be rendered to HTML at build time. Meaning you need to return an array of the possible paths for that route from it.

// 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 will then generate the props for each page based on the paths returned by getStaticPaths at build time.

// 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
        }
    };
}

Finally, in your page component you can access the data passed from the props.

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

Next.js prerendering error on getStaticPaths

1 Answers