DEV Community

Rhythm Saha
Rhythm Saha

Posted on

How to Set Up a Next.js Project with TypeScript and Tailwind CSS

#nextjs #typescript #tailwindcss #webdev

Hey there, fellow developers! Rhythm Saha here, founder of NovexiQ, my web development agency right here in Santipur, West Bengal. As a fullstack web developer and a final-year MCA student, I'm always exploring the best tools and practices to build cutting-edge applications. When I started NovexiQ, I really wanted to use the most modern, efficient, and scalable tech for our clients. That's exactly why Next.js, TypeScript, and Tailwind CSS became the cornerstone of my development stack.

If you're looking to dive into modern web development, set up your projects with a solid foundation, and build sleek, fast user interfaces, you've come to the right place. This guide is tailored for beginners. I'll walk you through a step-by-step process: initializing a Next.js project, integrating TypeScript for type safety, and then styling it effortlessly with Tailwind CSS. This is the exact setup I use for new projects at NovexiQ, and honestly, it's something I wish I had a clear guide for when I was first starting out.

Why this specific trifecta, you ask? Well, Next.js is a fantastic framework for React applications. It offers features like server-side rendering (SSR), static site generation (SSG), and API routes right out of the box. TypeScript, on the other hand, brings powerful type checking. This makes your codebase way more robust and maintainable, especially as projects grow. And Tailwind CSS? It's a utility-first CSS framework that totally supercharges your styling workflow! You can build beautiful designs right in your JSX without writing a single line of custom CSS. Together, they form an incredibly productive and scalable development environment. It's awesome!

Before We Begin: Prerequisites

Before we jump into the setup, make sure you've got the following installed on your machine:

  • Node.js: Ensure you have Node.js version 18.17 or higher. You can download it from the official Node.js website.
  • npm (Node Package Manager) or Yarn/pnpm: These come bundled with Node.js. I personally prefer pnpm for its speed and efficient disk space usage, but npm or yarn work just fine.

Step 1: Creating Your New Next.js Project

This is where the magic begins! Next.js has an excellent command-line tool that helps us quickly set up a new project. Just open your terminal or command prompt and run this command:

npx create-next-app@latest my-modern-app
Enter fullscreen mode Exit fullscreen mode

Replace my-modern-app with your desired project name. The @latest ensures you're using the most recent version of Next.js. After running this, the CLI will ask you a series of questions to configure your project. Here's how I usually answer them for my NovexiQ projects. I totally recommend this for a modern setup:

  • Would you like to use TypeScript? Yes (Absolutely! It's essential for robust code, trust me.)
  • Would you like to use ESLint? Yes (Keeps your code quality and consistency on point!)
  • Would you like to use Tailwind CSS? Yes (Our styling powerhouse, of course!)
  • Would you like to use src/\ directory? Yes (It organizes your source code so nicely!)
  • Would you like to use App Router (recommended)? Yes (This is the latest and greatest routing paradigm in Next.js. You'll love it!)
  • Would you like to customize the default import alias (@/*)? No (The default @/\*\ is perfectly fine for most projects, no need to overcomplicate things.)

Once you answer these questions, Next.js will set up all the necessary files and dependencies. It might take a few moments, depending on your internet connection.

After the setup's complete, just navigate into your new project directory:

cd my-modern-app
Enter fullscreen mode Exit fullscreen mode

And then, start the development server:

npm run dev # or yarn dev or pnpm dev
Enter fullscreen mode Exit fullscreen mode

Open your browser and head to http://localhost:3000. You should see the default Next.js starter page. Congrats! You've officially got your foundation set up.

Step 2: Understanding the Project Structure

Let's take a quick tour of the most important files and folders that get generated:

  • src/: This directory contains all your application's source code.
  • src/app/: This is where your routes and pages live, thanks to the App Router. For example, src/app/page.tsx is your homepage.
  • src/app/globals.css: This file contains your global CSS styles and importantly, the Tailwind CSS directives.
  • public/: For static assets like images, fonts, and favicons.
  • tailwind.config.ts: Your central configuration file for Tailwind CSS. We'll explore this further.
  • postcss.config.js: Configuration for PostCSS, which Tailwind CSS uses under the hood.
  • next.config.js: The main configuration file for your Next.js application.
  • tsconfig.json: The TypeScript configuration file.

Step 3: Customizing Tailwind CSS

Tailwind CSS is super powerful because it's so customizable. The tailwind.config.ts file is where you really customize Tailwind for your project's specific design system. Let's open tailwind.config.ts. It should look something like this:

// tailwind.config.ts import type { Config } from 'tailwindcss' const config: Config = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', }, }, }, plugins: [], } export default config
Enter fullscreen mode Exit fullscreen mode

Inside the theme.extend object, you can add custom colors, fonts, spacing, breakpoints, and tons more. For instance, at NovexiQ, we often define a custom primary color palette. Let's add a custom color and a custom font family together:

// tailwind.config.ts import type { Config } from 'tailwindcss' const config: Config = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { colors: { novexiqPrimary: '#2563EB', // A custom blue, for example novexiqAccent: '#FACC15', // A custom yellow }, fontFamily: { sans: ['Inter', 'sans-serif'], // Add 'Inter' as your default sans-serif font heading: ['Montserrat', 'sans-serif'], // A custom font for headings }, backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', }, }, }, plugins: [], } export default config
Enter fullscreen mode Exit fullscreen mode

Remember to install any custom fonts you define (e.g., via Google Fonts or by self-hosting them) and link them in your globals.css or directly in your layout file. For example, to use 'Inter' and 'Montserrat', you'd typically import them in app/layout.tsx from next/font/google. It's pretty straightforward!

Step 4: Building a Simple Component with TypeScript and Tailwind

Now that our environment's ready, let's build a simple, reusable button component using TypeScript for prop typing and Tailwind for styling. This is how I design components for clarity and reusability at NovexiQ.

First, create a new directory for your components inside src. Just run this command:

mkdir -p src/components
Enter fullscreen mode Exit fullscreen mode

Then, create a file named src/components/Button.tsx:

// src/components/Button.tsx import React from 'react'; // Define the shape of our component's props using TypeScript interface interface ButtonProps { children: React.ReactNode; // The content inside the button (e.g., text, icon) onClick?: () => void; // Optional click handler variant?: 'primary' | 'secondary' | 'outline'; // Different visual styles className?: string; // Optional additional Tailwind classes } const Button: React.FC<ButtonProps> = ({ children, onClick, variant = 'primary', className = '' }) => { let baseStyles = 'px-6 py-3 rounded-lg font-semibold transition duration-300 ease-in-out'; let variantStyles = ''; switch (variant) { case 'primary': variantStyles = 'bg-novexiqPrimary hover:bg-blue-700 text-white'; break; case 'secondary': variantStyles = 'bg-gray-200 hover:bg-gray-300 text-gray-800'; break; case 'outline': variantStyles = 'border-2 border-novexiqPrimary text-novexiqPrimary hover:bg-novexiqPrimary hover:text-white'; break; default: variantStyles = 'bg-novexiqPrimary hover:bg-blue-700 text-white'; } return ( <button onClick={onClick} className={`${baseStyles} ${variantStyles} ${className}`} > {children} </button>  ); }; export default Button;
Enter fullscreen mode Exit fullscreen mode

Notice how we're using the custom novexiqPrimary color we defined earlier! This really helps keep your design system consistent.

Now, let's use this button in our homepage (src/app/page.tsx). Open that file and modify it:

// src/app/page.tsx import Button from '../components/Button'; // Adjust path if your structure differs export default function Home() { const handlePrimaryClick = () => { alert('Primary button clicked!'); }; const handleOutlineClick = () => { alert('Outline button clicked!'); }; return ( <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-50"> <h1 className="text-5xl font-heading font-bold text-gray-900 mb-8"> Welcome to NovexiQ's Modern App! </h1> <p className="text-lg text-gray-700 mb-12 max-w-2xl text-center"> This is a Next.js, TypeScript, and Tailwind CSS starter project. Built with passion from Santipur. </p> <div className="flex space-x-4"> <Button onClick={handlePrimaryClick} variant="primary"> Get Started </Button> <Button onClick={handleOutlineClick} variant="outline"> Learn More </Button> <Button variant="secondary" className="shadow-lg"> Browse Demos </Button> </div> </main> ); }
Enter fullscreen mode Exit fullscreen mode

Save these files and check your browser at http://localhost:3000. You should see your custom buttons, styled beautifully with Tailwind and with TypeScript handling all the proper typing! If you used the Inter\ and Montserrat\ fonts as I did, you'll see those applied as well. This just shows how powerful tailwind.config.ts\ truly is!

Step 5: Global CSS and Tailwind Directives

While Tailwind is utility-first, you might occasionally need to add some global base styles or import external CSS. That's where src/app/globals.css comes in. You'll notice it already contains the three crucial Tailwind directives, ready to go:

/* src/app/globals.css */ @tailwind base; @tailwind components; @tailwind utilities; /* You can add your own global styles below these directives */ html, body { scroll-behavior: smooth; } /* Example: Custom utility that isn't provided by Tailwind directly */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }
Enter fullscreen mode Exit fullscreen mode

PostCSS processes these directives to inject Tailwind's generated CSS into your project. Try to avoid adding specific class-based styling that might conflict with Tailwind. Instead, it's better to use Tailwind utility classes directly in your JSX or extend Tailwind's theme.

Step 6: Preparing for Deployment

Once your application's ready, deploying a Next.js app is super straightforward. Especially with Vercel (they're the creators of Next.js, after all!), it's been the smoothest deployment workflow I've experienced.

To build your application for production, just run:

npm run build # or yarn build or pnpm build
Enter fullscreen mode Exit fullscreen mode

This command will create an optimized production build of your application in the .next folder. If you want to run the production build locally:

npm run start # or yarn start or pnpm start
Enter fullscreen mode Exit fullscreen mode

For actual deployment, just push your code to a Git repository (like GitHub), and connect it to a Vercel project. Vercel automatically detects it's a Next.js app and handles all the rest for you!

Wrapping Up: Your Journey Starts Now!

And there you have it! You've successfully set up a modern web development project using Next.js, TypeScript, and Tailwind CSS. This is the exact foundation I use for all my client projects at NovexiQ, and it truly empowers me to build robust, scalable, and visually appealing applications super efficiently. From here, the possibilities are endless – dive into Next.js's data fetching, API routes, authentication, and so much more!

My journey of building NovexiQ from scratch, right here in Santipur, has taught me so much about having a solid tech stack and, just as importantly, sharing what I learn. I really hope this guide helps you kickstart your own projects with confidence. Don't hesitate to experiment, break things, and learn! The web development community, especially in India, is vibrant and supportive, so keep building and keep growing.

If you've got any questions or run into issues, feel free to reach out. Happy coding!

Top comments (0)