Alejandro Garcia Anglada

Tell me this never happen. You have a new idea of project, and then you start coding straight away. You need all sorts of things, Server Side Rendering because you want Google to pick up your content. Also, you want it to be fast, so you start to code split code, dealing with webpack... But then, when you are all set, you start losing confidence about your idea and give up. This is what happen to me most of the times, until I discover Next.js.

What is Next.js?

Next.js, is a framework built on top of React witch already have everything you need to start your project. Server Side Rendering, Automatic Routing and code splitting based on folder structure, built in CSS-in-JS solutions, Zero config ...etc. And it's super fast! Everything we've dreamt with, Next.js has it.

How do I start?

Create a folder for your project.

$ mkdir [folder_name]

Initialize it.

$ npm init -y

And install Next.js with the latest version of React.

$ npm i next react react-dom

Add these scripts to your package.json.

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

That's all you need to install. Now like any other website, it needs pages, right?

Create a folder called /pages in the root of your project.

$ mkdir pages

And create your first page.

One of the amazing features of Next.js, is that it recognize the name of the component and folders you add into your /pages directory and makes a router out of it.

Examples:

• If you create a file called index.js, that's going to be your / route.
• If you create a file called about.js, that's going to be your /about route.
• If you create a folder called /blog and inside you add a file called index.js, that's going to be your /blog route.
• If you create a folder called /categories and inside you add a file called javascript.js, that's going to be your /categories/javascript route.

Pretty simple, and you don't need to deal or install any router, that is all transparent.

How do I get data to my page?

If you have been working with React for a while, you have probably came across doing React.render to show the content from your component, and you know that React does all that in the client. Also when you fetch some data, it does it when the application is already rendered.

Next.js added a method to your React component to handle that situation, so you can fetch data from the server and show it straight away to the user, allowing a better use of Server Side Rendering. All that comes with a lot of advantages, but one of them is that the data comes already with the content, so Google or any other search engine can pick it up.

Let's see it in practice.

import fetch from 'isomorphic-unfetch'
function Page({ stars }) {
  return <div>aganglada.com stars: {stars}</div>
}
Page.getInitialProps = async ({ req }) => {
  const res = await fetch('https://api.github.com/repos/aganglada/aganglada.com')
  const json = await res.json()
  return { stars: json.stargazers_count }
}
export default Page

As you can see getInitialProps is an async function that will wait for all promises to be resolved or rejected, and then return something. It's intentionally called getInitialProps as you very conveniently get the initial data needed for rendering the content on your page, in your props object on your page component.

What's next?

As you have noticed, we didn't write a single line of configuration and your project was ready to start coding in the time you wrote three lines on your command line.

But Next.js is really flexible and have plenty more, go to their documentation to know discover more features or wait for me to show you more in my blog 😜.

For now, all we can do is thank the people who made this possible, because without them we will never start our projects 👏.