[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Discussions](/c/community/4)

# If the page was previously cached as a 404

67 views · 3 likes · 4 posts


Ibs Arvind Yadav (@ibs-arvind-yadav) · 2025-03-19 · ♥ 1

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<Props> = ({ 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 <div></div>
  }

  const meta = (
    <Meta title={name} description={description} url={`/companies/${company.attributes?.slug}/`} image={imageUrl} />
  )
  return (
    <Main meta={meta}>
      <MainContainer id="mainContainer">
        <ThemeOnly theme="ilta">
          <IltaHeader />
        </ThemeOnly>
        <div className="flex flex-col bg-clouds">
          {company && (
            <>
              <SolutionBreadcrumb companyName={company.attributes?.name || ''} />
              <CompanyHeader company={company} />
            </>
          )}
        </div>
        <div className="flex w-full bg-clouds justify-center items-center">
          <div className="!max-w-[1100px] w-full flex flex-row justify-start items-center">
            <SolutionSearchPageTab
              id={COMPANIES_DETAILS_TAB}
              activeTab={tabIdx}
              className="w-[117px]"
              onSelectTab={onSelectTab}
            >
              Details
            </SolutionSearchPageTab>
            <SolutionSearchPageTab
              id={COMPANIES_DIRECTORY_TAB}
              activeTab={tabIdx}
              className="w-[117px]"
              onSelectTab={onSelectTab}
            >
              Directory
            </SolutionSearchPageTab>
          </div>
        </div>
        {tabIdx === COMPANIES_DETAILS_TAB && (
          <div className="flex flex-col">
            <div className="flex justify-center">
              <div className="!max-w-[1100px] flex flex-col justify-between w-full md:mb-32">
                <Section title={'Overview'} description={description || ''} url={website || ''} items={overviewItems} />
                <Section title={'Services'} description={''} url={''} items={[]} content={services} />
              </div>
            </div>
          </div>
        )}

        {tabIdx === COMPANIES_DIRECTORY_TAB && (
          <div className="flex flex-col">
            <div className="flex justify-center">
              <div className="!max-w-[1100px] flex flex-col justify-between w-full md:mb-32 relative">
                <div className="w-1/4 pr-10 flex flex-row">
                  <SearchField className="my-8" />
                </div>
                {company && (
                  <SearchPagination
                    filterProps={props.filters}
                    companyId={company.id || ''}
                    companyName={name}
                    followOnly={false}
                    includeCompany={false}
                  />
                )}
              </div>
            </div>
          </div>
        )}

        <ThemeOnly theme="legaltech">
          <Footer />
        </ThemeOnly>
      </MainContainer>
    </Main>
  )
}

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


BestCodes (@bestcodes) · 2025-03-20 · ♥ 1

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.


Ibs Arvind Yadav (@ibs-arvind-yadav) · 2025-03-20

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?


Amy Egan (@amyegan) · 2025-03-20 · ♥ 1

Hey @ibs-arvind-yadav. 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