Part 1: How to Build a NextJS App using Typescript and TailwindCSS: The Complete Guide

What is Next.js?

Next.js is a production-ready framework built on top of React and Node.js. It ships with all the features you need to get your React app up and running in no time.

You can use Next.js to build static or dynamic apps since it supports both client-side and server-side rendering. Next.js v9 introduced API routes, which allow you to extend your Next.js app with serverless functions built with Node.js, Express.js, GraphQL, and so on.

Next.js uses automatic code-splitting (lazy loading) to render only the JavaScript needed for your website. As an added bonus, this makes Next.js great for SEO.

What is TypeScript?

TypeScript is a popular language created and maintained by Microsoft. It’s a superset of JavaScript, which makes all its features optional.

You can convert your existing JavaScript app to TypeScript and it should work as expected as long as your code is valid JavaScript. TypeScript allows you to set types on your variables and functions so you can type-check your code statically and catch errors at compile time.

You can also use modern features that are not yet supported in JavaScript. And don’t worry about browser support — TypeScript compiles to plain JavaScript, which means your TypeScript code will never ship in the browser.

What is TailwindCSS?

TailwindCSS is a utility-first CSS framework for rapidly building custom user interfaces. You can say it is a cool way of writing inline styling and achieve an awesome interface without writing a single line of your own CSS! Tailwind isn’t the first utility CSS library, but it is the most popular at the moment and the best in my opinion.

Setup

I have created a GitHub repository with starter files you can either clone the repository(Can be used as starter files for other amazing projects! Maybe give it a ⭐ while you are at it 😃) or follow the steps below

1. Setting up a new NextJS app with Typescript
   Setting up a NextJS project with Typescript is actually really easy. Running the following command would create a basic NextJS app with Typescript support.

   npx create-next-app nextjs-crashcourse --ts
   # or
   yarn create next-app nextjs-crashcourse --typescript
   

2. Adding TailwindCSS to the project
   Go inside the project folder and install the required dependencies

   cd nextjs-crashcourse
   // using npm
   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
   // using yarn
   yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
   

   Creating the tailwind configuration file

   npx tailwindcss init -p
   

   This command would create a tailwind configuration file(tailwind.config.js) and a postcss configuration file(postcss.config.js)

3. Editing the tailwind.config.js file
   Change the file to the following code snippet

   // tailwind.config.js
   module.exports = {
    purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
   }
   

4. Adding tailwind to your CSS file
   Add the following lines of code to the top of the styles/global.css file

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

And that's it! 🥳 You have successfully set up the files required for the series. Also, note that you could use this as boilerplate code for your "next" application! Meet you in the second part of the series.

🙌 Support

If you're enjoying my articles, consider supporting me with a coffee ☕️. It really helps me a lot.

🌎 Lets connect

Github
Twitter
LinkedIn

🎸 Feedback

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.