Next.js Discord

Discord Forum

Turning a server side page into static page in Next 13

Answered
Northern Saw-whet Owl posted this in #help-forum
Open in Discord
Northern Saw-whet OwlOP
Hello, I have a page that contains a list of projects. I want to turn it into a static page instead of having the loader when a request is made to that page since the content doesn't change a lot.

Previously we would use getStaticProps to do so. I'm aware of generateStaticParams however it doesn't seem to be sending the data as props but as dynamic params, and this page has a fixed url.

Current page implementation is as follows:

const ProjectsPage = async () => {
  const projects = await getProjects()

  return (
    <div className="flex flex-col gap-20">
      <div className="flex items-center justify-between">
        <h1>Projects</h1>
        <ProjectsViewType />
      </div>
      <ProjectsList projects={projects} />
    </div>
  )
}

export default ProjectsPage
Answered by alfonsus
you can force it using
export const dynamic = 'force-static'
or
export const dynamic = "error"
View full answer

15 Replies

alfonsus
have you tried building it?
@alfonsus have you tried building it?
Northern Saw-whet OwlOP
yup, gets generated as server side
alfonsus
did you use any of the (request-time)-specific features?
using headers() cookies(), will turn it into lambda
basically, i can't tell for sure since i don't know what you put in
getProjects and ProjectsViewType and ProejctsList
Northern Saw-whet OwlOP
i don't think so, here's getProjects

const getProjects = async () => {
  const prisma = new PrismaClient()
  const projects = await prisma.project.findMany({
    where: {
      isPublic: true,
    },
    orderBy: {
      createdAt: 'desc',
    },
  })
  return projects
}


ProjectsViewType is just a client component that allows a user to switch and store user preferences, and ProejctsList is the a display based on that preference
alfonsus
hmm do you have link to repo?
Northern Saw-whet OwlOP
i can't share it
alfonsus
oh
well
alfonsus
you can force it using
export const dynamic = 'force-static'
or
export const dynamic = "error"
Answer
alfonsus
the former will try to make it static
the latter will throw an error if dynamic features are used when its meant to be a static route
Asian black bear
@Northern Saw-whet Owl Since you have zero control over how PrismaClient works, and Next assumes it makes the page dynamic, please feel free to use export const dynamic = 'force-static'
Personally, I prefer the declarative style of at least using error, because the Next guesses seem totally random