If the page was previously cached as a 404

Discussions
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 = ({ 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 = (
<Meta title={name} description={description} url={/companies/${company.attributes?.slug}/} image={imageUrl} />
)
return (






{company && (
<>
<SolutionBreadcrumb companyName={company.attributes?.name || ‘’} />

</>
)}




Details


Directory



{tabIdx === COMPANIES_DETAILS_TAB && (



<Section title={‘Overview’} description={description || ‘’} url={website || ‘’} items={overviewItems} />
<Section title={‘Services’} description={‘’} url={‘’} items={} content={services} />



)}

    {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

1 Like
2

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.

1 Like
3

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?

4

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.

1 Like