Route to Next.js
November 15, 2019
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 calledindex.js
, that's going to be your/blog
route. - If you create a folder called
/categories
and inside you add a file calledjavascript.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 👏.