loading...
Wealize

Static files with Nextjs

miangame profile image Miguel A. Gavilán Merino ・3 min read

Hi! In this post I want to talk about static files in next.js, when and how to use them to improve our application performance.

I have been working with Nextjs for a while.
It is a very powerful framework, since it solves many problems that we find when code an application with reactjs, such as the use of webpack, routing, etc.
But of course all this can be modified as we want.

Also with nextjs we have two types of rendering: Server Side Rendering (SSR) and Static Generation (SSG).
Next we are going to talk about this last type, which is the competition of the well-known Gatsby to generate static pages.

How can I create static pages?

To make our pages static, we just have to add the getStaticProps function to our page.

const Contact = ({title}) => (
  <>
    <h1>{title}</h1>
  </>
)

export async function getStaticProps(context) {
  return {
    props: {
      title: "Contact"
    },
  }
}

export default Contact

As with getInitialProps or getServerSideProps, what we return are the parameters that later arrive at our application as props.

Only with this, the contact page will be rendered statically AT BUILD TIME.
We can check it by running yarn build, And this is the output we get:
Alt Text
We can see in the legend that the contact page has been exported to a static file and also its size, and we can see it in the file explorer.
Alt Text

But this is not all, for example it may be that at some point changes have been added to a page that has already been generated statically and we want it to be regenerated with this new content in production.
For this, from version 9.5 of nextjs we have "Incremental Static Regeneration" that will allow us to configure every few seconds we want this page to be rendered again.
This can be done very easily just by adding revalidate to what getStaticProps returns.

export async function getStaticProps(context) {
  return {
    props: {
      title: "Contact",
      // Next.js will attempt to re-generate the page:
      // - When a request comes in
      // - At most once every second
      revalidate: 1, // In seconds
    },
  }
}

All this is great for those pages that are not very common that can change as an information page, a contact page, etc. but ...

What happens to pages that are dynamic?

For this we have another function with which we can indicate which routes we want it to export statically.
We need a dynamic route, for example if we want to export our blog posts, we should have something like this in our files.
Alt Text
In this new file, we also need the getStaticProps, but we will also add a new getStaticPaths function.

const PostPage = () => {
  const router = useRouter()
  const {
    query: { id }
  } = router

  return (
    <>
      <h1>POST #{id}</h1>
    </>
  );
};

export async function getStaticPaths() {
  return {
    paths: [{
      params: {id: '1'}
    }],
    fallback: false
  }
}

export async function getStaticProps(context) {
  return {
    props: {},
  }
}

export default PostPage

What are we returning?

  • paths: Routes that we can export. For example we can generate them with a map function.
  • fallback: With this prop we can tell nextjs that if there is no certain route within paths, force its rendering.

With the previous example, if we execute yarn install, we get the following console output:
Alt Text
In the previous image, we can see how the routes that we have established have been exported, and we can also find them in the file system.
Alt Text

And with this I finish a small introduction to the generation of static pages with one of my favorite frameworks at the moment ❤️.

Thanks for reading me!
gif

Posted on by:

miangame profile

Miguel A. Gavilán Merino

@miangame

Web developer at The Neon Project · I am a hard worker, charismatic and a little perfectionist. I never think that something is good enough.

Wealize

Unlock tomorrow. We build digital products. We solve complex problems that drive the change needed to thrive in today’s world. #cognitiveservices #blockchain

Discussion

pic
Editor guide