Tutorial to configure and deploy a Next.js project

Next.js is a React framework that allows you to create websites and web applications. It is widely used in the world of web development, whether for personal or professional projects. Many startups use it to create an application or SaaS. Unfortunately, too many projects are launched on the wrong foundations, leading to regressions with each update and increasingly high development costs over time.

In this article, we will discover how to configure a Next.js project to get off to a good start. We will use different libraries like ESLint, Prettier, Jest, TailwindCSS, husky and lint-staged.

In addition to configuring the libraries, we will see how to version our project with GitHub. Finally, we will set up a CI using GitHub Actions and deploy our project on Vercel.

Creation of the Next.js project

To begin, we will create our Next.js project with the latest version available. To do this, open a terminal and run the following command:

1 npx create-next-app@latest

During the creation of the project, you will have to provide some information such as the name of the project, the use or not of Typescript, etc. I advise you to answer yes to most of the questions, especially for the creation of the src folder. When developing your project, you'll save configuration and research time by separating configuration files and your code.

Develop correctly with Typescript

For some time now, Next.js has been installed and configured with Typescript and TailwindCSS. Typescript configuration is in the tsconfig.json file. Depending on your preferences and your project, you can modify this configuration.

Styling your application with TailwindCSS

The TailwindCSS configuration is in the tailwind.config.js file. You may need to modify it to modify your theme (for example to change the main color of your site, create animations, etc.). You can also install plugins to add functionality to TailwindCSS.

Improve the readability of your code

Having readable and correctly structured code is important for the maintainability of a project. To do this, we will use ESLint which is installed by default on a new Next.js project. This library makes it possible to detect errors in the code and automatically correct them when possible.

In addition to this library, we will use Prettier, a code formatter. Prettier allows you to structure the code well and make it more readable. It is possible to configure Prettier so that it adapts to your preferences.

To use these two libraries, we will install Prettier and the ESLint plugin for Prettier. To do this, run the following command:

1 yarn add -D prettier eslint-plugin-prettier

Once the library is installed, create a .prettierrc file at the root of your project. It is in this file that you will configure Prettier. Here is an example configuration:

1 2 3 4 5 6 { "semi": false, "singleQuote": false, "tabWidth": 4, "useTabs": true }

For Prettier to work with ESLint, you need to use the ESLint plugin eslint-plugin-prettier that we installed at the same time as Prettier. To do this, add the plugin to the .eslintrc.json file:

1 2 3 4 5 6 { "extends": [ "next/core-web-vitals", "prettier" ] }

In addition to the yarn lint command, you can create a new yarn format command to manually format all Typescript & Javascript files in the src folder of your code. To do this, simply modify your package.json file:

1 2 3 4 5 6 7 8 9 { "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "format": "prettier --write 'src/**/*.{tsx,ts,jsx,js}'" } }

To avoid having to think about linter and format your code regularly, there is Husky and lint-staged which do this automatically before each commit. To do this, install the two libraries with the following command:

1 yarn add -D husky lint-staged

Then run the following command to initialize Husky:

1 npx husky-init

Then add this configuration to your package.json file:

1 2 3 4 5 6 7 8 { "lint-staged": { "src/**/*.{js,jsx,ts,tsx,json}": [ "npx prettier --write", "npx eslint --fix" ] } }

From now on, before each commit your code will be linted and formatted.

Test your app with Jest

To test your code, you can use the Jest framework. To do this, install Jest with the following command:

1 yarn add -D jest @types/jest ts-jest

Once Jest is installed, we will use the ts-jest library to configure Jest with Typescript, in particular to use aliases. To do this, create a jest.config.ts file at the root of your project:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import { pathsToModuleNameMapper } from "ts-jest" import { compilerOptions } from "./tsconfig.json" import type { JestConfigWithTsJest } from "ts-jest" const jestConfig: JestConfigWithTsJest = { roots: ["<rootDir>"], preset: "ts-jest", testEnvironment: "node", modulePaths: ["<rootDir>"], moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/", }), transform: { "^.+\\.(ts|tsx)?$": "ts-jest", }, } export default jestConfig

You can now write Typescript tests in your project with Jest 🎉

Implement CI/CD with GitHub

GitHub is a platform allowing you to version your project online. It also offers the possibility of integrating a CI/CD into your project thanks to the Github Actions.

To create a directory, go to the following link and fill in the various information for your project: https://github.com/new

You can then create a .github/workflows/main.yml file at the root of your project. This file will define a GitHub Action, it is a script that can be executed at each push, pull request and merge on your project. Here is an example of GitHub Action:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 name: Main GitHub Actions on: push: branches: [ main ] pull_request: branches: [ main ] jobs: test-job: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Use Node 18.17.x uses: actions/setup-node@v3 with: node-version: '18.17.x' - name: Install dependencies run: yarn install - name: Compile TypeScript run: tsc - name: Run tests run: jest

This GitHub Action will run on every push on the main branch and on every pull request that points to the main branch. It will simply install the dependencies of our project and compile Typescript then run the project tests with Jest.

Deploy your project online with Vercel

Now that we have a project created, linted and formatted, with style, tested and versioned, all that remains is to put it online! For this, we will use Vercel, a deployment platform which allows you to deploy different types of projects, but especially Next.js projects because they are the creators of this framework. By choosing Vercel, you will be able to benefit from all Next.js features like page preloading, image preloading, ISR, etc.

To deploy a project on Vercel, nothing could be simpler, just go to this page: https://vercel.com/new and follow the instructions. You can also use the Vercel CLI to deploy your project.

Once logged in, you can choose the project you want to deploy. If you already have a project on GitHub, you can select it. Otherwise , you can create a new project.

And that's it! With each push on your main git branch, a deployment will be carried out on Vercel. By default, Vercel creates an environment for each Pull Request that you create on GitHub. This feature can be useful when you want to test or have people on your team test your changes.

I hope this article will be useful for you to get your Next.js project off to a good start. If you have a question or need help to start your project, we can discuss it: Let's discuss your project.

If you want to discover how to architect your Next.js project, I invite you to read my article on hexagonal architecture in front-end: Hexagonal architecture in front-end.

Who am I?

In addition to having supported more than forty clients as a front-end developer and being interested in code quality, architecture and front-end technologies, I am passionate about entrepreneurship and investments. This is why I decided to create this blog.