DEV Community

Cover image for Build a Portfolio Website with Next.js
Gabriel CHALMET
Gabriel CHALMET

Posted on • Edited on

Build a Portfolio Website with Next.js

In this tutorial, we will create a simple portfolio using Next.js 13, with:

- React

- Tailwind CSS

- Dev.to for publishing articles

Step 1: Initialize the project

Run:

npx create-next-app@latest my-portfolio

cd my-portfolio

npm install

npm run dev

Step 2: Add Tailwind CSS

Run:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Configure tailwind.config.js and your CSS files according to the official Tailwind documentation.

Step 3: Create a Blog page

- Add a folder /app/blog (or /pages/blog if using pages router)

- Create page.js to display your articles

- Use fetch to get tutorials from Dev.to

Step 4: Deploy on Vercel

- Run vercel in your project

- Connect to your GitHub account

- Deploy in a few clicks

Tags: nextjs, react, portfolio, tutorial

Top comments (0)