Next.js

🚧 This docs are a work in progress. Please feel free to add anything you think is missing 🚧

What it is

Next.js is an awesome React framework that has a few great features:

• Static generation - HTML generated at build time.
• Server side rendering - HTML generated on each request.
• You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
• Typescript support
• And much more

Static Generation

• Using getStaticProps or/and getStaticPaths functions you can use the NextJS static generation.
• You can use this with

function Blog({ posts }) {
  ...
}

export async funtion getStaticProps() {
  const posts = await fetch('...');

  return {
    props: {
      posts
    }
  }
}

export default Blog;

or without data

export default function Blog() {
  ...
}

• This feature consists in serve to final users the same HTML generated at build time.

Use Cases

• Marketing pages
• E-commerce products listing
• Blog Posts

Server Side Rendering

• Static generation is not recommended if you cannot pre-render a page ahead of the user request. Buuut.. In that cases you can use the famous Server side rendering.
• Similar to Static generation, just place getServerSideProps function in the component page, and the server side rendering will be setted.

function Blog({ posts }) {
  ...
}

export async funtion getServerSideProps(context) {
  const posts = await fetch('...');

  return {
    props: {
      posts
    }
  }
}

export default Blog;

• In this case, on each page request will be generated a new HTML for each user.
• The page data will be fetched at request time, and the context(context type here) parameter contains specific parameters for the request.
• Slower than Static generation, but the pre-rendered page will always be up-to-date.

And... What about the Client side rendering?

• This is a great question and the anwser is even better.
• In some cases we don't need to pre-render some data and with Next you can "just" use Client side rendering.
• To do so, you can generate statically parts of the page that do not require external data, and when the page loads, fetch external data using Javascript features (states, lifecycles, etc) and populates the remaining parts of the page.

import useSWR from "swr";

function Profile() {
  // The team behind Next.js has created a React hook for data fetching called SWR.
  // The docs recommend to use this, but you can use other like axios, fetch ...
  const { data, error } = useSWR("/api/user", fetch);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

Check SWR Docs for more.

Use Cases

• User Dashboard pages is a good case to use Client side approach, because it is private, user-specific page, SEO isn't relevant and doesn't need to be pre-rendered.

How to use it

Using the Getting started section from the official docs is a good start to start to use the Next.js

We recommend you to create a new project with the next and start to understand it.

npx create-next-app your-app-name

if you want to start with typescript run this:

npx create-next-app --example with-typescript your-app-name

there are a few more examples on this link.

Differences from pure React

Since the Next.js is a SSR library, some things will not work the same as the pure React and it's good to test it to know the difference. There's some tests that you can do to know more about the Next's SSR:

• How Next handle the routes and dynamic routes;
• New Lifecycle methods: getStaticProps, getServerSideProps, getStaticPaths...
• Access an environment variable on client and on server;
• Next specific componentes: Head, App, Document;
• Redux with Next.js, how to handle it on the server side;
• Page pre-fetch, making navigation faster;
• Next-PWA plugin to handle the PWA;

Extra:

• Adding API routes inside the Next folder, with the folder pages/api;
• To do so you can just add a file inside pages/api folder, for example hello.js, and now you have an endpoint at http://your-domain/hello.
• And now you can work like it was node by itself.

//hello.js
export default (req, res, next) => {
  /...some logic.../;
  res.status(200).send({ message: "hello world" });
};

• After that its simply fetch this in front-end like an external API.

function Hello({ message }) {
  // the fetch could be done here in client side too
  return <div>{message}</div>;
}

export async function getStaticProps() {
  const res = await fetch("/hello");
  const message = res.json();

  return {
    props: {
      message,
    },
  };
}

export default Hello;

Possible problems