Next.js static rendering with getStaticPaths and getStaticProps

Next.js aim

One of the core principals of Next.js framework is to serve pages more quickly and generate an understandable source document which is the basic HTML document with all standard components such as header, meta, etc... So web crawlers can read and index your website more easily and then better SEO, it has also introduced a new way of routing pages which is so easy if compared with the way React does it.

Next.js prerendering

Next.js defines two ways of rendering: static generation and server-side rendering (SSR).

Static rendering

Static rendering is used in case your page is static and we can construct it at build time, you can even fetch your data from an API and Next.js will take care and render it for you, keep in mind that it only serve html pages, so no request or response are available to use or process.

Next.js knows that you would like to use static rendering when using specific function provided by the framework, the most used for static rendering are: getStaticPaths and getStaticProps.

getStaticPaths

The syntax is:

export async function getStaticPaths() {
  // we construct a fixed array with values from 1 to 5
  // it is possible to use an API call and await fetch data
  const posts = [
    { id: "1" },
    { id: "2" },
    { id: "3" },
    { id: "4" },
    { id: "5" },

  ];
  return {
    //the method should return always an object called paths, otherwise it will not work
    paths: posts.map((post) => {
      return {
        params: {
          id: post.id,
        },
      };

    }),
    /*option in the paths object, fallback false will return a pre-built page 404 in case no page found*/
    fallback: false,
  };
}

Some remarks regarding getStaticPaths function:

- It should be exported and async. - It should return object named paths only, if any other name is used this will not work. - Paths can have some specific flags, for instance _fallback_; you can check other _params_ in Next.js official documentation. - It should be included in a page which it can be served, this is React prerequisite since React needs to know in advance the props before it can render the page.

• Your js file could be named with brackets, for example: [id].js, it means that Next.js will be rendering pages with different id, but keep in mind that the same page name should be found in the paths returned value, so Next.js will know which id it has to be served in our example of id pages.

getStaticProps

The page will be served the same over time, unless you made a new build and change it, it is also possible to specify an amount of time for which Next.js will fetch your API after the time amount specified and re render the page again.

The variable is called revalidate and accepts seconds as a value and it should be put in the return statement of the getStaticProps function, and this is helpful in case your data change a little over a certain time.

//posts are the ones returned by the method getStaticProps
//you can only read them in the function scope
export default function Mypage({ posts }) {}
export async function getStaticProps() {
  const res = await fetch("https://mywebsite/api");
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    //asks Next.js to re render page at most once every 10 minutes
    revalidate: 600,
  };

}

Some remarks regarding getStaticProps function:

• You can only use it in js files where you will serve pages, so for the default configuration of a Next.js project, this function should only appear under pages folder.
• The function should be asynchronous as well.
• The function should return props keyword, inside the props object, you put whatever you would like to be available for page consumption.
• The call for API inside the function is done on server side, so it is possible to access database or specific API without worrying about security.

• The props are available to read as props passed to a React function inside the same page.