Create your first Next.js application

What is Next.js

Next.js is a minimalistic framework for server-rendered (SSR), and production-ready React applications. Here are some other cool features Next.js brings to the table:

• An intuitive page-based routing system (with support for dynamic routes)
• Automatically statically optimizes page(s) when possible
• Server-side renders page(s) with blocking data requirements
• Automatic code splitting for faster page loads
• Client-side routing with optimized page prefetching
• Built-in CSS support, and support for any CSS-in-JS library
• Webpack-based dev environment which supports Hot Module Replacement (HMR)
• API routes to build your API with serverless functions, with the same simple router used for pages
• Customizable with community plugins and with your own Babel and Webpack configurations

What we are going to create

Prerequisites

Before creating our first Next.js project, there are some essential dependencies that you need to install in order to at least run our app and install our application-specific dependencies:

• NodeJS: NodeJS is a cross-platform JavaScript run-time that executes JavaScript code outside of the browser. NodeJS lets developers use JavaScript to write command-line tools and server-side applications.
• Yarn: Yarn is a package manager for your code. It allows you to use and share (e.g., JavaScript) code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.
• Visual Studio Code: Visual Studio Code is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (e.g., C++, C#, Java, Python, PHP, Go) and runtimes (e.g., .NET and Unity).

I’m in favor of Yarn but you could also use NPM instead if you want to! Both are good tools for managing your packages.

Setup your project

With those essential dependencies installed, we are now able to scaffold our first project using the yarn interactive setup form.

If you don’t know what mkdir, cd and other CLI commands mean click here

Create a new folder on your system where your project lives. I call our new folder “devjam-dasboard”.

$ mkdir devjam-dashboard

Traverse into that directory

$ cd devjam-dashboard

Initialize a new Yarn project

$ yarn init

This command walks you through an interactive session to create a package.json file, after that we can start adding our application-specific dependencies.

Install dependencies

We’re going to add a whole lot of packages to the application, most of them are a must-have (some of them aren’t used in this part of the series yet).

$ yarn add body-parser dotenv dotenv-webpack express isomorphic-fetch next react react-dom styled-components bootstrap react-bootstrap

If everything did go well our package.json should look like this

• body-parser: This package lets your NodeJS application parse different types of request bodies (e.g., application/JSON).
• dotenv: Loads environment variables from .env for NodeJS projects.
• dotenv-webpack: A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
• Express: Fast, unopinionated, minimalist web framework for NodeJS
• isomorphic-fetch: This package adds an isomorphic fetch function that you can use both on the front-end and the back-end.
• Next.js, react, and react-dom: Together, these packages let you build React apps with Next on top.
• bootstrap and react-bootstrap: These packages allow you to use Bootstrap components without having to use jQuery.
• styled-components: Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components.

Launching from the command line

Launching Visual Studio Code from the terminal looks cool and is a productive way to edit (if you split your screen with the terminal on one side and Code on the other).

To enable this, press cmd + shift + P, type in shell command, and select Install code command in path

Configure babel

Create a file called .babelrc inside the project root

$ touch .babelrc

Open the file

$ code .babelrc

Paste the following into the file and hit save.

{
“presets”: [“next/babel”],
“plugins”: [[“styled-components”, { “ssr”: true }]]
}

This will make styled-components work with Next.js and let Babel know that you are developing with this package. Configuring Babel with the next/babel preset is needed to make this package compile your code correctly.

Configure dotenv

Create a file called .env inside the project root

$ touch .env

Open the file

$ code .env

Paste the following into the file and hit save.

PORT=3000

An env file is a simple configuration text file that is used to define some variables you want to pass into your application’s environment. This file needs something like a parser to make it work. The parser reads the variable definitions one-by-one and parses them to the environment. In our case, the parser is webpack in combination with dotenv.

Configure Next.js

Create a file called .next.config.js inside the project root

$ touch next.config.js

Open the file

$ code next.config.js

Paste the following into the file and hit save.

Line 13 to 16 help Next.js parse the configuration file you just created (i.e., the .env).

A Next.js config file is a regular NodeJS module, not a JSON file. It is used by the Next.js server and build phases, and it’s not included in the browser build.

Let’s build!

Create a pages directory

In Next.js, a page is a React Component exported from a .js, jsx, .ts, or .tsx file in the pages directory.

$ mkdir -p src/pages
^ the -p flag makes sure src is created first

Add a new page

Create a file called placeholder.js inside the src/pages directory

$ touch src/pages/placeholder.js

Open the file

$ code src/pages/placeholder.js

Paste the following into the file and hit save.

Each page is associated with a route based on its file name. e.g., if you create pages/placeholder.js that exports a React component like below, it will be accessible at domain.io/placeholder

Run it

To wrap things in this section, open the package.json file add a script property to the main object.

Open the file package.json

$ code package.json

Paste the following into the file and hit save.

“scripts”: { “dev”: “next” },

After defining the dev script, you can execute

$ yarn dev

to run the first version of your Next.js app.

If everything works as expected, in a few seconds, you will be able to open http://localhost:3000/placeholder in a web browser.

You did it!

Github repository

If you want to check out the code without following the guide or just check if you did everything right DevJam Part 1 — Repository

Thank you for taking the time to read this story! If you enjoyed reading this story, clap for me by clicking the below so other people can see this here on Medium.

I work at Sytac.io; We are a consulting company in the Netherlands, we employ around ~100 developers across the country at A-grade companies like KLM, ING, ABN-AMRO, TMG, Ahold Delhaize, and KPMG. Together with the community, we run DevJam check it out and subscribe if you want to read more stories like this one. Alternatively, look at our job offers if you are seeking a great job!