If the page was previously cached as a 404

import { GetStaticProps, NextPage } from 'next' import { useRouter } from 'next/router' import React, { useEffect, useState } from 'react' import { CompanyHeader } from 'src/components/CompanyHeader/CompanyHeader' import { Footer } from 'src/components/Footer/Footer' import MainContainer from 'src/components/global/MainContainer/MainContainer' import { Section } from 'src/components/global/Overview/Section' import { SearchField } from 'src/components/global/SearchField' import { ThemeOnly } from 'src/components/global/ThemeOnly' import { IltaHeader } from 'src/components/IltaHeader/IltaHeader' import { SearchPagination } from 'src/components/SearchPagination/SearchPagination' import { SolutionBreadcrumb } from 'src/components/SolutionBreadcrumb/SolutionBreadcrumb' import { SolutionSearchPageTab } from 'src/components/Tabs/SolutionSearchPageTab' import { THEME } from 'src/config/config' import { apolloSdk } from 'src/graphql/apolloSdk' import { ICompanyEntity } from 'src/graphql/generated/hooks' import { useDefaultLogo } from 'src/hooks/useDefaultLogo' import { useUpdateQueryParams } from 'src/hooks/useUpdateQueryParams' import { Meta } from 'src/layout/Meta' import { Main } from 'src/templates/Main' import { COMPANIES_DETAILS_TAB, COMPANIES_DIRECTORY_TAB, FeaturesType, FilterOption, SectionItem } from 'src/types' import { checkNotEmpty } from 'src/utils/checkNotEmpty' import { getYearFoundedItem } from 'src/utils/getYearFoundedItem'

type Props = { company: ICompanyEntity filters: FilterOption[] }

const CompanyPage: NextPage = ({ company, ...props }: Props) => { const router = useRouter() const { updateQueryParams } = useUpdateQueryParams() const tabs = router.query.tabs const pathName = tabs ? tabs[0] : 'Details' const defaultTabIdx = pathName === 'Details' ? 401 : pathName === 'Directory' ? 402 : 401 const [tabIdx, setTabIdx] = useState(defaultTabIdx) const overviewItems: SectionItem[] = []

const name = company.attributes?.name || '' const description = company.attributes?.description || '' const imageUrl = useDefaultLogo(company.attributes?.logo?.data?.attributes?.url) const website = company.attributes?.website || '' const hqs = company.attributes?.hqs?.data || [] const regionsServed = company.attributes?.regionsServed?.data || [] const yearFounded = company.attributes?.yearFounded || '' const size = company.attributes?.size || '' const services = company.attributes?.services || '' useEffect(() => { const { tabs } = router.query if (tabs && tabs === 'Directory') { setTabIdx(COMPANIES_DIRECTORY_TAB) } }, [router])

if (checkNotEmpty(hqs)) { const convertedItems: FeaturesType[] = (hqs && hqs?.map((item) => { const converted: FeaturesType = { name: item?.attributes?.name || '', iconColor: '#011D58' } return converted })) || []

const item: SectionItem = {
  title: 'HEADQUARTERS',
  type: 'SpanDataIcon',
  subType: 'normal',
  items: convertedItems,
}
overviewItems.push(item)

}

if (checkNotEmpty(regionsServed)) { const convertedItems: FeaturesType[] = (regionsServed && regionsServed?.map((item) => { const converted: FeaturesType = { name: item?.attributes?.name || '' } return converted })) || []

const item: SectionItem = {
  title: 'Regions Served',
  type: 'SpanDataList',
  subType: 'normal',
  items: convertedItems,
}
overviewItems.push(item)

} if (checkNotEmpty(yearFounded)) { const yearFoundedItem = getYearFoundedItem('Year founded', yearFounded) if (yearFoundedItem) { overviewItems.push(yearFoundedItem) } } if (checkNotEmpty(size)) { const item: SectionItem = { title: 'Size', type: 'SpanDataList', subType: 'normal', items: [{ name: size }] } overviewItems.push(item) }

const onSelectTab = (index: number) => { setTabIdx(index) let newTabs = 'Details' if (index === COMPANIES_DETAILS_TAB) { newTabs = 'Details' } if (index === COMPANIES_DIRECTORY_TAB) { newTabs = 'Directory' }

const keyword = router.query.keyword

updateQueryParams({
  tabs: newTabs,
  keyword: (keyword as string | undefined) || undefined,
})

}

if (!name || !description || !website) { return

}

const meta = (

) return (

      {company && (
        <>
          
          
        </>
      )}
    

    

      

        
          Details
        
        
          Directory
        
      

    

    {tabIdx === COMPANIES_DETAILS_TAB && (
      

        

          

            

            

          

        

      

    )}

    {tabIdx === COMPANIES_DIRECTORY_TAB && (
      

        

          

            

              
            

            {company && (
              
            )}
          

        

      

    )}

) }

export default CompanyPage

export const getStaticProps: GetStaticProps = async ({ params }) => { try { if (!params?.slug) { return { notFound: true, } } const slug = params.slug as string const [{ companies }] = await Promise.all([apolloSdk.getCompanyBySlug({ slug, includeIlta: THEME === 'ilta' })]) if (!companies || companies.data.length === 0) { return { notFound: true, } } const filters: object[] = [] console.log('getStaticProps:companies', companies) return { props: { company: companies.data[0], filters, }, revalidate: 60, } } catch (error) { // eslint-disable-next-line no-console console.error('Error fetching static props of companies:', error) return { notFound: true, revalidate: 60, // Reattempt fetching during the next static regeneration } } }

export async function getStaticPaths() { const { companies } = await apolloSdk.getAllCompanies() const paths: Array<{ params: { slug: string } }> = []

if (companies) { companies.data.forEach((company) => { if (!company?.attributes?.slug) return paths.push({ params: { slug: company.attributes?.slug } }) }) } console.log('Generated Paths:', paths) return { paths, fallback: 'blocking', } }

still my I am facing 404

Could you give more specific details?

Also, this has helped me before with Next.js caching issues. I stop the app, run rm -rf .next, rebuild it & start it again.

Same issue occurs many time on production also, so how many time i will do it on production server, this not good way for production server this is not correct way. Also use this code for revalidate the path again

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) { // Check for secret to confirm this is a valid request if (req.query.secret !== process.env.NEXT_PUBLIC_REVALIDATE_SECRET_TOKEN) { return res.status(401).json({ message: 'Invalid token' }) }

const invalidatePaths = req.query.invalidate_path || []

try { if (typeof invalidatePaths === 'string') { await res.revalidate(invalidatePaths, { unstable_onlyGenerated: true, }) } else { await Promise.all(invalidatePaths.map((path) => res.revalidate(path))) } return res.json({ revalidated: true }) } catch (err) { // If there was an error, Next.js will continue // to show the last successfully generated page return res.status(500).send('Error revalidating') } }

Can any one help me?

Hey . You've included a lot of unformatted code, but not much description. It would be really helpful if you start from the beginning with a summary of the problem and debugging steps you've already tried.

I recommend reading through the 404 debugging topic as well. That includes tips that can solve most 404 errors we see here.

https://community.vercel.com/t/debugging-404-errors/437

Vercel Community

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are...