Building webapps fast with Next.js app router


Setting up webapps can be time consuming, particularly when the goal is to build a quick proof of concept of something. One challenge I find is that I spend most of my time setting up the project, leaving little time to actually build the functionality on top of it.

I’ve recently been exploring Next.js as a framework for creating full stack applications easily and I’ve found a way of quickly setting up a new project by combining it with Tailwind CSS for styling.

From my exploration I’ve found a set of tools that provide a good baseline for building web apps, they are:

With all that in mind, lets setup a new project.

Setting up a project

To setup the project we are going to use create-next-app, which is a tool that easily allows bootstrapping new Next.js applications. create-next-app has a few CLI flags we can pass to streamline the process.

To get started open a terminal and cd to where you keep your projects, for example cd ~/projects then copy and paste the below command into the terminal

pnpm create next-app \
	--typescript \
    --tailwind \
    --eslint \
    --app \
    --src-dir \
    --import-alias "@/*"

The above command sets up Typescript and Tailwind by default and uses the new app router. When ran you will be prompted to enter a project name

? What is your project named? › my-app

After the command finishes, open the project in vscode with

code my-app

Setting up Prettier for automatic code formatting

Prettier takes a lot of the manual work out of formatting code by automatically formatting code when you save. Its really quick to setup and saves heaps of time.

Create a VSCode workspace

VSCode has a concept of a per project workspace, which allows you to store editor configuration in the repo, which is useful if multiple people contribute to the code (as everyone will have the same base config). It also has some handy features such as defining a set of recommended extensions to prompt the user with when they open the project.

Remove unneeded boilerplate

create-next-app will automatically generate some boilerplate, I find it easiest to delete it, so you can start with a blank slate. Luckily deleting the boilerplate is really quick.

Run the app

With all the configuration now done, everything is ready to go to build an app. The app can be started with pnpm dev. Once ran you should see a blank screen, add some content to the src/app/page.tsx file and you should see it reflect on the page.