Two days have passed since I started building this website on `Next.js` and I'm very surprised about what I have been able to achieve in so little time: - Server Side Rendering - Code splitting - Isolated styles components, as well as just one place to manage global styling - Theming - Test driven development with `Jest` - Incredibly fast and responsive development workflow We will discuss some of this points in the post and I will discuss others in future posts, but let me first explain you a bit better about how is this site built. In this [git repository](https://github.com/ricardocasares/analogical) I keep the code for the whole app, and using GitHub as my database, I'm using issues to store the blog posts, which are then retrieved and rendered as HTML. I enjoy writing posts in Markdown, and I'm getting a comments system for free, but I haven't yet implemented this. So, getting started, `Next.js` is built upon a very simple premise that you might find familiar if you used to build websites in the 90's, and resumes basically to this: > Your file system is your routing system Taking this into account, my project structure looks like this: ``` . ├── components ├── config.js ├── lib ├── node_modules ├── package.json ├── pages ├── providers ├── routes.js ├── server.js ├── static └── yarn.lock ``` But pay especial attention to the `pages` folder, this is actually the only thing `Next.js` enforces to start a new project, you need this folder. Mine looks like the following: ``` . ├── pages │ ├── changelog.js │ ├── index.js │ ├── photos.js │ ├── post.js │ └── work.js ``` This leads to the first point in the top list on this post, server side rendering. Every file inside the `pages` folder is mapped to an `URL` in your app. The only requirement in this file is to export a `React` component. It might be a class extending `React`'s `Component` or as well a stateless component. Let's check the code inside `index.js` ```jsx // external import React from "react"; // internal import Page from "../components/Page"; import Title from "../components/Title"; import Subtitle from "../components/Subtitle"; import Chart from "../components/Chart"; import { dark } from "../lib/themes"; import { ThemeProvider } from "../providers/Theme"; const Index = () => (

Hello! {/* Omitting the rest of code here for brevity */}

{/* Omitting the rest of code here for brevity */}

); export default Index; ``` Do not care much about the inner components, but just pay attention to the default export `Index`, which is just a stateless component. Go ahead and try for yourself! ```shell npm init npm install react react-dom next ``` Create a `pages` folder, with an `index.js` file that exports some `React` component: ```jsx export default () =>

Hello world

``` That's it, run `$(npm bin)/next` from your console, go to your browser, hit `http://localhost:3000/` and you will see a server side rendered home page. Neat! ### Code splitting But wait, this leads to the second topic in the list: code splitting. For those who might not know, code splitting is a technique to reduce the amount of code that needs to be delivered to the client in order to render the resource they have requested for. Simply put, your app might have a blog, a login page and maybe and admin dashboard to manage the posts. We can suppose that users hitting the `/blog` endpoint of your app, are interested primarily in reading your articles, so there is no need for you to deliver code that belongs to the admin dashboard or login page, that's why we split the bundles into chunks containing all necessary code to render just one resource, like the blog, for example. All of this comes out of the box with `Next.js` by the simple fact that you are organizing your app into pages. So every page already has everything it needs to render itself. When navigating to another page, new chunks belonging to the requested resource will be downloaded on the fly in order to render. But now, let's imagine that you hit `/login` page, you are probably planning to login and manage your blog posts or comments. `Next.js` is smart enough to let you make predictions about the next resources your users will ask for, so in this case you are able to download them in advance using a nice little feature of the `next/Link` component. By adding the property `prefetch` to `Link`, `Next.js` will prefetch this page chunk in advance, so in our previous scenario, by the time you finish writing your username and password on the login form and hit the login button, the code needed to render the admin dashboard has probably already been downloaded, providing a seamless experience. So go ahead and modify your `index.js` file to look like this: ```jsx import Link from "next/Link"; export default () =>

Hello world

About

; ``` And create the new `about.js` page: ```jsx import Link from "next/Link"; export default () =>

About

Back to home

; ``` The `prefetch` function only works in production mode, so this time, run a build using `$(npm bin)/next build` and then `$(npm bin)/next start`, go to your home page, and check the Network tab inside Chrome developer tools when you refresh the index page. Luckily you will see the about page chunk being downloaded before hand. Now, sitting on the about page, hit refresh, and notice that since we didn't add `prefetch` to the `Link`, the home page chunk will not be downloaded in this case. That's enough for this post already, but I plan to keep writing about my adventures with `Next.js`, I hope this encourages you a little bit to start experimenting yourself. Happy hacking!

The changelog

.css-1you3ep{color:rgba(255,255,255,1);border-bottom:2px solid rgba(255,255,255,.25);-webkit-text-decoration:none;text-decoration:none;-webkit-transition:border-color 0.5s;transition:border-color 0.5s;}.css-1you3ep:hover{border-color:rgba(255,255,255,.625);}Kanban cheat sheet

Scrum cheat sheet

Voice User Interfaces

Learning Next.js

Recursion baby

Scope safe constructors

Constructor stealing

Kanban cheat sheet