Initialize Next.js With TypeScript: A Step-by-Step Guide

Hey guys! So, you're looking to kickstart a new Next.js project with TypeScript, huh? Awesome! You've come to the right place. In this guide, we'll walk you through the entire process, from setting up the project to structuring your directories. We'll also cover integrating Tailwind CSS for styling. Let's dive in!

Setting Up Your Next.js Project with TypeScript

Alright, first things first, let's get that Next.js project up and running with TypeScript. This is the bedrock of our Moji Heirloom NFT frontend, so we want to make sure we lay a solid foundation. You see, starting with TypeScript right away can save you a ton of headaches down the road. It's like building with a blueprint instead of just winging it. Trust me, your future self will thank you!

Using create-next-app

The easiest way to get started is by using the create-next-app command. This handy tool scaffolds a new Next.js application with all the necessary configurations. It's like having a magic wand that sets up everything for you! All you have to do is run a single command in your terminal. Now, open your terminal and let’s get this show on the road.

yarn create next-app --typescript moji-heirloom-nft-frontend
# or
npm create next-app --typescript moji-heirloom-nft-frontend
# or
pnpm create next-app --typescript moji-heirloom-nft-frontend

In this command, moji-heirloom-nft-frontend is the name of our project. Feel free to name it something else if you prefer, but sticking to a descriptive name helps keep things organized. The --typescript flag tells create-next-app that we want to use TypeScript, which is exactly what we want. This ensures that our project is set up with all the necessary TypeScript configurations right from the get-go.

TypeScript helps catch errors early in development, makes your code more maintainable, and provides better autocompletion and type checking in your editor. It’s a win-win situation! Once you run the command, create-next-app will do its thing, downloading dependencies and setting up the project structure. This might take a few minutes, so grab a coffee or stretch your legs while you wait.

Navigating the Project

Once the installation is complete, navigate into your new project directory:

cd moji-heirloom-nft-frontend

Now, you're inside your project! Let’s take a quick look around. You'll notice a few key directories and files. The most important ones are:

• pages: This is where your Next.js pages live. Each file in this directory becomes a route in your application. For example, pages/index.tsx will be your homepage, and pages/about.tsx will be your about page. Next.js uses file-system routing, which means the structure of your pages directory directly corresponds to the routes in your application. It’s super intuitive once you get the hang of it!
• components: This is where you'll store your reusable React components. Think of components as the building blocks of your UI. You can create components for buttons, headers, forms, and anything else that you want to reuse across your application. Keeping your components organized in this directory makes your codebase cleaner and easier to manage.
• styles: This directory contains your CSS files, including global styles and CSS Modules. Next.js supports various styling solutions, but for this project, we'll be using Tailwind CSS, which we'll set up in the next section.
• public: This directory is for static assets like images, fonts, and other files that you want to serve directly. Anything placed in the public directory will be accessible at the root of your domain. For example, if you put an image named logo.png in the public directory, you can access it in your application using /logo.png.
• tsconfig.json: This file is the configuration file for TypeScript. It specifies the compiler options and settings for your project. You typically won't need to modify this file unless you have specific TypeScript configurations in mind. But it’s good to know it’s there!

Understanding this basic directory structure is crucial for building a well-organized and maintainable Next.js application. It sets the stage for everything else we’ll be doing.

Setting Up Tailwind CSS for Styling

Next up, let's get Tailwind CSS set up. Tailwind CSS is a utility-first CSS framework that provides a set of pre-designed CSS classes. It might sound a bit strange at first, but trust me, it’s incredibly powerful. Instead of writing custom CSS for every element, you can compose styles by applying utility classes directly in your HTML. This leads to faster development and more consistent styling.

Installing Tailwind CSS

To install Tailwind CSS, we'll use npm (or yarn, if you prefer). Run the following commands in your terminal:

pnpm install -D tailwindcss postcss autoprefixer

This command installs tailwindcss, postcss, and autoprefixer as development dependencies. Tailwind CSS uses PostCSS to transform its styles, and Autoprefixer automatically adds vendor prefixes to your CSS, ensuring compatibility across different browsers.

Initializing Tailwind CSS

Next, we need to initialize Tailwind CSS and create the necessary configuration files. Run this command:

pnpm tailwindcss init -p

This command generates two files: tailwind.config.js and postcss.config.js. The tailwind.config.js file is where you can customize your Tailwind CSS configuration, such as adding custom colors, fonts, and breakpoints. The postcss.config.js file configures PostCSS, including the plugins we installed earlier.

Configuring Template Paths

Now, we need to tell Tailwind CSS which files to scan for CSS classes. This ensures that Tailwind CSS includes only the styles you're actually using in your project, which helps keep your CSS bundle size small. Open tailwind.config.js and modify the content array to include the paths to your pages and components:

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
 "./app/**/*.{js,ts,jsx,tsx,mdx}",
 "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 "./components/**/*.{js,ts,jsx,tsx,mdx}",
 ],
 theme: {
 extend: {},
 },
 plugins: [],
};

This configuration tells Tailwind CSS to scan all JavaScript, TypeScript, and JSX/TSX files in the app, pages, and components directories. This ensures that any Tailwind CSS classes you use in these files will be included in your final CSS.

Adding Tailwind Directives to Global Styles

Next, we need to add the Tailwind CSS directives to our global styles file. Open styles/globals.css (or create it if it doesn't exist) and add the following:

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

These directives tell Tailwind CSS to inject its base styles, component styles, and utility styles into your global CSS. This is what makes Tailwind CSS work its magic!

Importing Global Styles

Finally, we need to import the global styles file into our application. Open pages/_app.tsx (or create it if it doesn't exist) and add the following import statement:

import '../styles/globals.css';

function MyApp({ Component, pageProps }: AppProps) {
 return <Component {...pageProps} />;
}

export default MyApp;

This import statement ensures that our global styles, including the Tailwind CSS styles, are applied to our entire application. With this, Tailwind CSS is fully set up and ready to use in your project!

Structuring Your Project Directory

Now that we have Next.js and Tailwind CSS set up, let's talk about project structure. A well-structured project is easier to navigate, maintain, and collaborate on. It's like having a well-organized toolbox versus a messy pile of tools. Here’s a basic directory structure we recommend:

moji-heirloom-nft-frontend/
├── components/
│ ├── Button.tsx
│ ├── Navbar.tsx
│ └── ...
├── pages/
│ ├── _app.tsx
│ ├── index.tsx
│ └── ...
├── styles/
│ ├── globals.css
│ └── ...
├── public/
│ ├── favicon.ico
│ └── ...
├── tsconfig.json
└── ...

Let's break down each directory:

• components: This is where you'll store your reusable React components. Each component should be self-contained and responsible for rendering a specific part of the UI. For example, you might have components for buttons, forms, modals, and more. Organizing your components in this directory makes it easy to reuse them throughout your application.
• pages: As we discussed earlier, this directory contains your Next.js pages. Each file in this directory corresponds to a route in your application. The _app.tsx file is a special file that Next.js uses to initialize pages. You can use it to include global styles, layouts, and other configurations that apply to all pages in your application. The index.tsx file is the homepage of your application.
• styles: This directory contains your CSS files, including global styles and CSS Modules. We've already added the Tailwind CSS directives to the globals.css file. You can also create additional CSS Modules for styling specific components or pages.
• public: This directory is for static assets like images, fonts, and other files that you want to serve directly. Anything placed in the public directory will be accessible at the root of your domain.

This is just a starting point, of course. As your project grows, you might want to add more directories, such as lib for utility functions, hooks for custom React hooks, and contexts for React context providers. The key is to keep your project organized and structured in a way that makes sense for your team and your application.

Acceptance Criteria Checklist

Alright, let’s make sure we’ve hit all the acceptance criteria:

• [x] A new Next.js application is created using create-next-app.
• [x] The project is configured to use TypeScript.
• [x] Tailwind CSS is set up for styling.
• [x] The basic directory structure (e.g., components, pages, styles) is in place.

Looks like we’re all good! Give yourself a pat on the back. You’ve successfully initialized a new Next.js project with TypeScript and Tailwind CSS. You're now ready to start building the amazing Moji Heirloom NFT frontend!

Conclusion

Initializing a Next.js project with TypeScript and Tailwind CSS might seem like a lot of steps, but once you get the hang of it, it becomes second nature. By starting with a solid foundation, you'll save yourself time and effort in the long run. Remember, TypeScript helps catch errors early, Tailwind CSS speeds up styling, and a well-structured project makes everything easier to manage.

So, go forth and build awesome things! And if you have any questions or run into any issues, don't hesitate to ask. Happy coding, guys!