How to Build a Next.js Portfolio Website in 2026 (Beginner Tutorial)

A strong portfolio can do more for your career than a long resume. It shows what you can build, how you think, and how you communicate. For many developers, a Next.js portfolio is the perfect choice, because it is fast, flexible, friendly to search engines, and easy to deploy for free or at a very low cost.

In this beginner tutorial, I walk you through planning, creating, and launching your own portfolio site. You will learn how to set up the project, structure your pages, showcase projects, add basic SEO, optimize images, and publish online. You should know a little HTML, CSS, and JavaScript, but you do not need to be an expert. If you like, you can also speed up the coding with AI, as explained in our guide to vibe coding.

Key Takeaways

• Next.js is a React framework that makes it easy to build fast pages with built-in routing, image optimization, and SEO tools.
• A good portfolio needs just five things: a clear headline, selected projects, an about section, a contact method, and fast loading.
• Show three to six quality projects, each with a problem, your role, the tools used, and the result.
• Add page titles, descriptions, and social preview images so your site looks good in search and on social media.
• Keep dependencies updated for security, and deploy from a Git repository so updates are one click.

Why Build Your Portfolio With Next.js?

You could use a template builder, so why write code? A custom site proves your skills, and Next.js makes the work manageable. It offers file-based routing, so a file in the right folder becomes a page. It can pre-render pages, which means visitors get content quickly and search engines can read it easily. It also includes an image component that resizes and compresses pictures automatically, which helps your loading speed.

Hiring managers often open portfolios on their phones, between meetings. A fast, clean, mobile-friendly site makes a strong first impression. You can read the official guides in the Next.js documentation, which is well written and regularly updated.

Step 1: Plan Your Portfolio Before You Code

Spend thirty minutes planning. Write down who your visitors are, such as recruiters, clients, or fellow developers, and what you want them to do next, such as email you or view your resume. Then decide on these sections:

• Hero: Your name, role, and one sentence about what you do best.
• Projects: Three to six of your best works.
• About: A short story, your skills, and what you are looking for.
• Contact: An email link and social profiles.
• Optional blog: Short posts about what you learn, which can help search traffic and show communication skills.

Sketch the layout on paper. Keep it simple, with plenty of white space and readable fonts.

Step 2: Set Up Your Development Environment

Install a current long-term-support version of Node.js, a code editor such as Visual Studio Code, and Git. Create a free GitHub account, since you will use it to store your code and deploy your site. Then create a new project using the official starter command from the Next.js documentation. The setup will ask a few questions, such as whether to use TypeScript, a linter, and a CSS framework like Tailwind. For a beginner, the recommended defaults are fine.

Start the development server and open the local address in your browser. You should see the starter page. If you can see it, your environment works, and you are ready to build.

Step 3: Understand the Project Structure

Modern Next.js projects use an app folder for routing. Each folder inside it becomes a route, and a page file inside the folder defines what appears there. For example, a page file at the top of the app folder becomes your homepage, and a folder called projects with its own page file becomes the projects page. A layout file wraps your pages with shared elements like the navigation bar and footer.

Create these pieces as reusable components in a separate components folder: a header, a footer, a project card, and a button. Reusable components keep your code tidy and make it easy to change the design later.

Step 4: Build the Core Sections

The Hero Section

Your headline should say what you do and who you help, not just your name. Compare “Hi, I am Sam” with “Front-end developer building fast, accessible web apps for startups.” The second one gives a visitor a reason to keep reading. Add a clear button, such as View my work or Contact me.

The Projects Section

Store your project data in a simple list of objects, with a title, description, tools, live link, and code link. Then map over the list to display project cards. This keeps content separate from layout, so adding a new project takes a minute. For each project, answer four questions: What problem did it solve? What was my role? Which tools did I use? What was the result?

Quality beats quantity. A single well-explained project with a live demo is worth more than ten unfinished tutorials. If you built something with security in mind, mention it. Keeping your dependencies patched is a good habit, and our guide to the Next.js security update and patch process shows how to stay current.

The About Section

Write in a friendly, honest voice. Mention your background, your main skills, and what kind of work you want. Add a professional photo if you are comfortable, because it builds trust.

The Contact Section

Make it very easy to reach you. A simple email link and your GitHub and LinkedIn profiles are enough. If you add a contact form, protect it against spam and test that messages arrive.

Step 5: Style Your Site

You can use plain CSS, CSS modules, or a utility framework like Tailwind. Whatever you choose, follow these design basics:

• Use one or two fonts and a small color palette.
• Keep text large enough to read on phones.
• Check color contrast so text is readable for everyone.
• Make buttons and links easy to tap.
• Test the layout on small, medium, and large screens.

Add a dark mode only if you have time. A clean, consistent light design is better than a messy dark one.

Step 6: Optimize Images and Performance

Use the built-in image component for screenshots and photos. It serves correctly sized images in modern formats and delays loading images below the screen. Always add descriptive alt text, which helps accessibility and search. Compress screenshots before uploading, and avoid auto-playing videos.

Test your site with PageSpeed Insights and aim for fast loading and stable layouts. Small habits like limiting third-party scripts, using system or well-optimized fonts, and avoiding huge libraries keep your site quick.

Step 7: Add SEO Basics

Even a personal site benefits from search visibility, especially if people search your name. Next.js has a metadata feature that lets you set a title and description for each page. Write a unique title for each page, such as “Sam Lee | Front-End Developer” and a clear meta description of about 150 characters. Add a social preview image, so links look good when shared. Create a sitemap and a robots file, then add your site to Google Search Console.

If you write a blog, choose topics that answer real questions, such as fixing a specific error or explaining a tool you learned. Over time, these posts can bring visitors who then discover your projects.

Step 8: Deploy Your Portfolio

Push your code to a GitHub repository. Then connect the repository to a hosting platform that supports Next.js, such as Vercel, which is made by the Next.js team. The platform builds your site and gives you a live web address. Every time you push a change, it redeploys automatically. Later, you can connect a custom domain such as yourname.com, which looks more professional than a default address.

If you prefer to run a blog on WordPress alongside your portfolio, read our guide on how to start a tech blog. Many developers keep both: a custom site for projects and a blog for writing.

Portfolio Mistakes to Avoid

• Too many projects. Showcase your best work only.
• No live demos. Recruiters rarely download code. Give them a link to click.
• Tutorial clones. Add your own twist so the project shows original thinking.
• Broken links. Test every link after deployment.
• Slow pages. Huge images and heavy animations hurt the first impression.
• No contact info. Make sure a visitor can reach you within seconds.

Launch Checklist

1. Every page has a unique title and description.
2. All images have alt text and are optimized.
3. The site looks good on mobile and desktop.
4. All project links and buttons work.
5. Your contact method is tested.
6. PageSpeed results are good.
7. Your site is added to Search Console.
8. Your portfolio link is on your resume, GitHub, and LinkedIn.

Next.js Portfolio FAQ

Do I need TypeScript for a Next.js portfolio?

No. JavaScript works fine, but TypeScript is popular with employers and helps catch mistakes. Choose the one you want to practice.

Is Next.js too much for a simple portfolio?

It can feel like a lot, but it teaches skills that employers value, and the finished site is fast. If you only need a single page, a simpler tool could work.

How much does it cost to host a portfolio?

Many platforms have free plans that are enough for a personal site. A custom domain typically costs a small yearly fee.

How many projects should I include?

Three to six strong projects are ideal. Explain each one clearly and link to a live demo.

Can I use AI to help build it?

Yes, for boilerplate, layout ideas, and debugging. Review every line, understand what it does, and make sure you can explain your project in an interview.

Final Thoughts on Building a Next.js Portfolio

A Next.js portfolio gives you a fast, professional home on the internet and a chance to show real skills. Plan the content, build the core sections, optimize images, add basic SEO, and deploy from Git. Then keep improving it as you learn. Publish version one this week, even if it is not perfect. A live portfolio that you keep updating beats a perfect one that never goes online.