Setup a Next JS App with Typescript and Tailwind in 2022

By Greg Goodwin

Published in React

August 31, 2022

1 min read

Setup a Next JS App with Typescript and Tailwind in 2022

Getting yarn installed

If you are not sure if yarn is already installed, open a command line and run the following. yarn version If yarn is not installed you want to run the following command. npm install --global yarn

Creating a new project

To create a project with typescript out of the box you can run the following command once you get to the directory you want to use in the command line.

yarn create next-app --typescript app-name
cd app-name
yarn dev
code .

Add baseUrl to tsconfig.json to allow absolute imports then add your paths.

"baseUrl": ".",
"paths": {
  "@components": ["components/*"],
  "@pages": ["pages/*"],
  "@utils": ["utils/*"],
  "@store": ["store/*"],
  "@images": ["images/*"],
  "@styles": ["styles/*"]
}

Add new file .env.local touch .env.local or echo > .env.local.

NEXT_PUBLIC_BASE_URL="http://localhost:3000"

Setup ESLint and Prettier (optional)

If you want to setup ESLint and Prettier you can run the following command. This will help you write better code.

yarn eslint .
yarn add -D @typescript-eslint/eslint-plugin prettier eslint-config-prettier @typescript-eslint/parser

If you are using Visual Studio Code you can create a VSCode settings file to auto Prettier if you would like. .vscode/settings.json

touch .vscode/settings.json or echo > .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Edit .eslintrs.json

{
  "plugins": ["@typescript-eslint"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error"
  }
}

Create .prettierrc.json

touch .prettierrc.json or echo > .prettierrc.json

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": false,
  "tabWidth": 2,
  "useTabs": false
}

Install Tailwind

To install Tailwind you can run the following command.

yarn add -D tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/line-clamp @tailwindcss/aspect-ratio @headlessui/react react-icons clsx
npx tailwindcss init -p

Edit tailwind.config.js

/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const colors = require("tailwindcss/colors");

const brandColor = colors.blue;

module.exports = {
  // Add support for dark mode, toggled via a class:
  // https://tailwindcss.com/docs/dark-mode
  darkMode: "class",
  // Inform Tailwind of where our classes will be defined:
  // https://tailwindcss.com/docs/optimizing-for-production
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // NOTE: We modify the gray color, as the default Tailwind gray color is heavily saturated
        // with blue, which makes it look strange in dark mode. This gray color is more balanced,
        // and works better for sites supporting dark mode.
        gray: colors.gray,
        // Add a new "brand" color to all Tailwind utilities, so that we can easily change it.
        brand: brandColor,
      },
      // Modify the default ring color so that it matches the brand color:
      ringColor: {
        DEFAULT: brandColor["500"],
      },
    },
  },
  // Add some basic Tailwind plugins to add additional features:
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/aspect-ratio"),
  ],
};

Edit styles/global.css

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

#__next {
  min-height: 100%;
}

You can safely delete Home.module.css as we will not need that with tailwind.

Modify pages/index.tsx

import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>Site Title</title>
        <meta name="description" content="Site Description" />
      </Head>
        <h1 className="text-3xl font-bold underline">Hello world!</h1>
    </>
  );
};

export default Home;

Create pages/_document.tsx

import { Head, Html, Main, NextScript } from "next/document";

export function Document() {
  return (
    <Html
      className="h-full scroll-smooth bg-white antialiased [font-feature-settings:'ss01']"
      lang="en"
    >
      <Head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lexend:wght@400;500&display=swap"
        />
        <link rel="icon" href="/favicon.ico" />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest"></link>
      </Head>
      <body className="flex h-full flex-col">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

export default Document;

Edit pages/_app.tsx

import { useState, useEffect } from "react";
import "@styles/globals.css";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  const [isSSR, setIsSSR] = useState(true);

  useEffect(() => {
    setIsSSR(false);
  }, []);

  if (isSSR) return null;

  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;