Introduction

In this Essay im gonna walk through the setup process i learned in the Road to Next online course. The final result will be a new Next.js project that has the most relevant supporting tools prepared so that i am ready to create an awesome project.

Overview
Create a new Project with or without custom settings
Clean Boilercode to get rid of next.js starter example
ESLint to enable the same syntax structure through the whole application
TypeScript Type-Check Script to double check if I got all types right
Conclusion

Create a new Project

In order to get started, I need to create the project. The easiest and most straight forward way to do so is with the npx command. For making sure, the project will be configured the way I like, i decide to use the custom setup. Its important to know, that this command will prompt me for the project name and will afterwards automatically create a project folder, so there is no need for me to run this command inside of an empty project folder.

npx create-next-app@latest

Since this is the custom setup, I will have to choose my preferred settings:

Question	Answer
Would you like to use the recommended Next.js defaults?	No, customize settings
Would you like to use TypeScript?	Yes
Which linter would you like to use?	ESLint - Look Note below
Would you like to use React Compiler?	No - Look Note below
Would you like to use Tailwind CSS?	Yes
Would you like your code inside a src/ directory?	Yes
Would you like to use App Router?	Yes
Customize Imports	No

Note Linter: Robin from Road to Next also mentioned biome, I haven’t heard of it but maybe worth a look. lookup✏️
Note React Compiler: React Compiler is a new feature that automatically optimizes React components to improve performance. Even though this sounds helpful, beginners should turn it off so they can learn how React normally renders components and understand performance concepts that are commonly used in real-world applications today. I can also easily turn it on/off later:

// next.config.ts
const nextConfig: NextConfig = {
  reactCompiler: false,
};

Alternative choose default Settings

Incase I don’t care about customizing my setup, I can easily just accept the default settings.

npx create-next-app@latest myappname --yes

Source
🎥 Road to Next Video
📄 Next.js Documentation > Create a Project

Clean Boilerplate

When creating a project with the above mentioned command, I get a project that gets default boilerplate from next.js. Since I wanna make my own project, I need to remove that.

There must be for sure a way to create a completely empty next.js project with zero boilerplate lookup✏️

Most of the boilerplate lays in the root-page file.

src/app/page.tsx

But there are also some fonts and metadata defined in

src/app/layout.tsx

And some images at

public

ESLint

What is ESLint

ESLint will help me keep the same code structure during my whole project. Whenever my code happens to not follow the configured schema, ESLint will let me know and displays my code as an Error.

Custom config

I happend to find this config of a member of the Road to Next community and decided to go with it. All I had to do, was replace the content of eslint.config.mjs.

import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
import simpleImportSort from "eslint-plugin-simple-import-sort";
 
const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  {
    plugins: {
      "simple-import-sort": simpleImportSort,
    },
    rules: {
      "simple-import-sort/imports": [
        "error",
        {
          groups: [["^\\u0000", "^@?\\w", "^[^.]", "^\\."]],
        },
      ],
      "simple-import-sort/exports": "error",
    },
  },
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);
 
export default eslintConfig;

And then install the packages

npm install -D eslint-plugin-simple-import-sort

Script

Since I choose eslint as my linter in the project setup, I can make use of the VS Code extension. Additionally I can add a script, that I can run for automatically fix the eslint errors.

// package.json
"scripts": {
	// ...
	"lint-fix": "eslint . --fix"
},

After adding the new script, I can easily fix all my eslint errors with only running the script

npm run lint-fix

VS Code auto fix

Even simpler, I can also just use the suggestion of VS Code to fix the eslint issues. All I need to do then, is to click on the error (mostly imports in wrong order) and use the following shortcut and choose auto fix.

command .

VS Code fix on save

The most comfortable way is to just run eslint every time I save the file. However I did decide not to do so, because Im already using the prettier extension and don’t feel the need to change. However I still like to use eslint with the auto fix function.

TypeScript Type-Check Script

While the IDE already helps a lot with catching all kind of type errors, it still might be helpful to implement a TypeScript Type-Check Script - what a tongue breaker. After all its done in no time and it will double check if I got the types right. All I need to do is to add another script to package.json.

"scripts": {
	// ...
    "type": "tsc -noEmit"
  },

Now I can run this script to make sure i truly got all types correctly.

npm run type

Conclusion

And just like that I can setup a new project, install some of the relevant tools that support the developing and be ready to create my own project.

Notebook 📒

Explorer

📜 Setup a Next.js project