React.js is a very popular library for building user interfaces (some might call it frontend framework). React create single-page-applications app by default, and for those people who wanted a server-side rendered website might need to do some extra steps which I personally don't think is beginner friendly.

Here comes Next.js 🎉

When React is a single-page-applications app by default, Next.js provide hybrid static & server side rendering from the get go! It will save you a lot of time and hassle to setup a server side rendering on React.

Typescipt

The next thing to ease your development flow is to use Typescript. It's a superset of the Javascript language and provides optional typing which will make your code easier to read and debug.

tailwindcss

Tailwindcss is a utility-first CSS framework that can also be composed to build any design. In my opinion it really provide an easier way to style your component.

TL;DR

You can check for the finished boilerplate on my Github bellow.

npm install

npm run dev

npm run build
npm run start

If you want to do it from scratch, then let's do it!

Create new project

You need to have Node.js installed, if you already installed Node.js then let's create a new Next.js project with their provided typescript example.

npx create-next-app --example with-typescript my-app

By using above command, it will automatically setup typescript for us. You can see other examples here

After that you need to open the project folder with you IDE of choice, I'm using VS Code.

Create _app.tsx file

_app.tsx file is the root of Next.js app, it doesn't come by default if we are using typescript example from Next.js. Therefore we'll need to add it ourself. Create file called _app.tsx inside pages folder

/pages/_app.tsx

// eslint-disable-next-line
function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

This code is grabbed from the default Next.js app template.

Integrate tailwindcss

To integrate tailwindcss to our project, we need to install tailwindcss, postcss and autoprefixer.

Install required packages

npm i tailwindcss@latest

Create configuration file

After that we'll create tailwindcss' configuration file by running this command. It will create two files in your root project directory called postcss.config.js and tailwind.config.js.

npx tailwindcss init -p

I'll talk about the configuration files more later.

Include tailwind in your CSS

There are two ways that you can do this. Either by importing tailwindcss/tailwind.css directly to your _app.tsx or you can create a styles folder and create a css file inside that folder and import the tailwindcss inside the CSS then import the CSS file to _app.tsx.

I personally prefer the second option because it will give more flexibility for the future when you want to include more CSS files.

/styles/styles.css

/* @tailwind is a syntax from tailwindcss */
@tailwind base;
@tailwind components;
@tailwind utilities;

/pages/_app.tsx

import '../styles/styles.css'
// or
import 'tailwindcss/tailwind.css' // if you want to use the first option insted
// ...

After that, you'll be able to use tailwind classes in your project! But before that, let's setup 1 more thing that will improve your production build.

Remove unused CSS

By default all of tailwind's CSS will be included on your build, of course you don't want that, it will only add more to your build size. Tailwind comes with an option to purge all unused CSS classes in your projects, tailwind will check for your file and determine which class is used and which not.

To configure the options let's open tailwnd.config.js and look for purge property, it's usually at the top, if there is none, you can add the property yourself.
On the purge property, add your files path that uses tailwindcss' classes.

tailwind.config.js

module.exports = {
    purge: [
        './pages/**/*.tsx',
        // add more paths
    ],
    // ...
}

And we are done!

You can use this boilerplate to start a new Next.js project or implement it on your current project by following the step by step guide.

There are more property in tailwind.config.js and I will cover it on my future articles!