Getting Started

First, make sure you have Node.js and npm installed on your machine. You can then create a new Next.js project by running the following commands in your terminal:


npx create-next-app@14 my-portfolio
cd my-portfolio
npm install tailwindcss
npm install @types/react @types/node


After running these commands, you can start your Next.js development server by running npm run dev. This will start a local development server at http://localhost:3000.

Adding Tailwind CSS

To use Tailwind CSS in your Next.js project, you will need to create a configuration file for it. You can do this by running the following command:


npx tailwindcss init


This will create a tailwind.config.js file in your project’s root directory. You can then customize this file to include the Tailwind CSS utilities you want to use in your project.

Using Typescript

To add Typescript support to your Next.js project, you will need to create a tsconfig.json file in your project’s root directory. You can do this by running the following command:


npx typescript --init


After creating the tsconfig.json file, you can start writing Typescript code in your Next.js project. Typescript will help you catch errors early and write more maintainable code.

Building the Portfolio Website

Now that you have set up Next.js with Tailwind CSS and Typescript, you can start building your portfolio website. You can create new pages, components, and stylesheets to showcase your work and skills. You can also use the Next.js routing system to create clean and SEO-friendly URLs for your website.