Creating a Next.js project is a single-line command. But taking it from there to production takes much more. This article explains different steps to create a robust Next.js project.
Completed project Github repo: https://github.com/jobyjoseph/nextjs-boilerplate. Each step here can be checked out with the corresponding branch name.
1. Create Next App
Baby steps first. Decide a project folder on your laptop. Navigate to the folder in terminal and run:
npx create-next-app@latest
When asked for project name, if you do not want to create a new folder, just enter
.
Give No for TypeScript and ESLint. We can add them later. Your answers look like:
My package versions:
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.1.0"
}
You just created a Next.js app. Well done.
2. Simple Home Page
When we install Next.js the home page looks like:
Make it simple. Delete all contents of app/page.js and paste below code React component code in app/page.js.
export default function Home() {
return <h1>Hello World</h1>;
}
Next, delete all contents of app/layout.js and replace it with:
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Delete below 2 files:
- page.module.css
- globals.css
Now, we have a very simple home page. We cleaned up our project to start with very minimal files.
3. Lock Node.js Version
Team members might be using different versions of Node.js. We want to standardize it.
Create .nvmrc file in project root. Add just one line to that file.
lts/iron
Above setting helps a developer to easily switch to Node.js v20(lts/iron) if they do nvm install.
Next, go to package.json file and add engine details.
"engines": {
"node": ">=20.0.0"
}
Now, if a developer tries to run the project using Node.js version 18, below error is displayed.
4. Stick with Yarn
It is not fun when the team uses both yarn and npm. It creates extra lock files and confusion.
Let us stick with yarn.
Create .npmrc in project root. Add just this line to strictly follow engine versions mentioned in package.json file.
engine-strict=true
And in package.json, engines section is updated to:
"engines": {
"node": ">=20.0.0",
"yarn": ">=1.22.0",
"npm": "please-use-yarn"
},
Now try, npm install. You will get this error.
This prevents the accidental creation of a package-lock.json file.
5. Setup ESLint
ESLint helps to catch many errors much earlier. You already will have a yarn lint command ready. Run it. If the command is not there, add it.
When asked, choose "strict" option.
It will install eslint and eslint-config-next as dependencies.
"devDependencies": {
"eslint": "^8.56.0",
"eslint-config-next": "^14.1.0"
}
Also an .eslintrc.json will be created with the below contents:
{
"extends": "next/core-web-vitals"
}
Now, run yarn lint again. The terminal says that everything is good.
Testing one case:
Let us check if Next.js catches a linting error. There is a inline script id rule. Let us violate that.
Go to app/page.js.
Add import to next/script.
import Script from "next/script";
Use the Script tag without an id attribute inside JSX.
<Script>{`console.log('Hello world!');`}</Script>
Save and run yarn lint. It throws error.
So default Next.js linting is working. Undo the test code.
References
How to Build Scalable Architecture for your Next.js Project
ESLint Next.js Documentation
Top comments (2)
I experienced many times error when re-installing old project modules while using a newer node version. I use nvm, and I have to remember to switch with
nvm use. I usually set this reminder within the readme file.I never heard of .nvmrc files, nor the "engines" package.json prop, and that will definitely be useful to force using a specific package manager and a node version 👍.
The only other way I considered this before was using a docker container, but seems a bit overengineering to me, especially for small projects.
I was also in the same boat till I knew this :D