Build a Simple Next.js Interactive Portfolio App

Written by

FixTechToday

in

In today’s digital landscape, a personal portfolio website is more than just a resume; it’s your online identity. It’s the first impression you make on potential employers, clients, or collaborators. A well-designed portfolio showcases your skills, projects, and personality, making it easier for people to understand what you do and what you’re capable of. But building a portfolio can seem daunting, especially if you’re new to web development. That’s where Next.js comes in. With its ease of use, performance, and flexibility, Next.js provides an excellent platform for creating dynamic, interactive, and SEO-friendly portfolio websites. This guide will walk you through building a simple yet effective portfolio app using Next.js, suitable for beginners to intermediate developers. We’ll cover everything from setting up your project to deploying it online, ensuring you have a solid foundation to showcase your work.

Why Choose Next.js for Your Portfolio?

Next.js offers several advantages over other frameworks and static site generators when it comes to building a portfolio:

  • Server-Side Rendering (SSR) and Static Site Generation (SSG): Next.js allows you to choose between SSR and SSG, optimizing your website for both performance and SEO. SSR renders pages on the server, while SSG pre-renders pages at build time. This means faster initial load times and better search engine rankings.
  • Easy Routing: Next.js simplifies routing with its file-system based router. You don’t need to configure routes manually; just create files in the pages directory, and Next.js handles the rest.
  • Built-in CSS Support: Next.js supports CSS Modules, styled-components, and other CSS-in-JS solutions, making styling your portfolio straightforward.
  • Image Optimization: Next.js provides an Image component that automatically optimizes images for different devices, improving performance.
  • API Routes: Easily create API endpoints within your Next.js application to handle form submissions, contact requests, or other backend operations.
  • Performance: Next.js is optimized for performance, leading to a better user experience.

These features make Next.js an ideal choice for a modern, high-performing portfolio website.

Setting Up Your Next.js Project

Let’s get started by setting up a new Next.js project. Open your terminal and run the following command:

npx create-next-app portfolio-app

This command will create a new directory called portfolio-app with all the necessary files to get you started. Navigate into the project directory:

cd portfolio-app

Now, start the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see the default Next.js welcome page. This confirms that your project is set up correctly.

Project Structure Overview

Before we start building, let’s understand the basic structure of a Next.js project:

  • pages directory: This is where you’ll create your pages. Each file in this directory becomes a route in your application. For example, pages/index.js is the homepage, and pages/about.js is the about page.
  • components directory: This is where you’ll put reusable React components.
  • styles directory: This is where you’ll store your CSS files.
  • public directory: This is where you’ll put static assets like images, fonts, and other files that you want to serve directly.
  • package.json: This file contains information about your project, including dependencies and scripts.

Understanding these directories will help you organize your code and make it easier to maintain.

Building the Portfolio Pages

Let’s create the pages for our portfolio. We’ll start with a basic structure, including a homepage, an about page, and a projects page. Each page will have a simple layout and content.

Homepage (pages/index.js)

Open pages/index.js and replace the existing content with the following:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Your Name - Portfolio</title>
        <meta name="description" content="Your Name's Portfolio website" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Hello, I'm <span>Your Name</span>
        </h1>
        <p className={styles.description}>
          Welcome to my portfolio.
        </p>
      </main>

      <footer className={styles.footer}>
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
        >
          Your Name © {new Date().getFullYear()}
        </a>
      </footer>
    </div>
  );
}

This code sets up the basic structure of the homepage. It includes a Head component for SEO metadata, a main section with a title and description, and a footer. Remember to replace “Your Name” with your actual name.

About Page (pages/about.js)

Create a new file called about.js in the pages directory and add the following code:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function About() {
  return (
    <div className={styles.container}>
      <Head>
        <title>About - Your Name</title>
        <meta name="description" content="About Your Name" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          About Me
        </h1>
        <p className={styles.description}>
          Write a brief description about yourself, your skills, and your experience here.
        </p>
      </main>

      <footer className={styles.footer}>
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
        >
          Your Name © {new Date().getFullYear()}
        </a>
      </footer>
    </div>
  );
}

This creates a basic about page. Customize the content within the <p> tag to tell visitors about yourself.

Projects Page (pages/projects.js)

Create a new file called projects.js in the pages directory and add the following code:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Projects() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Projects - Your Name</title>
        <meta name="description" content="Your Name's Projects" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Projects
        </h1>
        <p className={styles.description}>
          List your projects here. Include project titles, descriptions, and links to live demos or GitHub repositories.
        </p>
      </main>

      <footer className={styles.footer}>
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
        >
          Your Name © {new Date().getFullYear()}
        </a>
      </footer>
    </div>
  );
}

This sets up a projects page where you will list your projects. You will need to add your project details later.

Styling Your Portfolio

Now, let’s add some styling to make your portfolio visually appealing. We’ll use CSS Modules for this example. Open styles/Home.module.css and replace the existing styles with the following:

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.main {
  padding: 5rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
  text-align: center;
}

.title span {
  color: #0070f3;
}

.description {
  text-align: center;
  line-height: 1.5;
  font-size: 1.5rem;
  max-width: 80%;
}

.footer {
  width: 100%;
  height: 100px;
  border-top: 1px solid #eaeaea;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

This CSS provides basic styling for the homepage. You can customize these styles to match your design preferences. Remember to adjust the .module.css file to style the about and projects pages as well, or create separate CSS Modules for each page or component.

Adding Navigation

To navigate between pages, we need to add a navigation menu. Create a new component called Navbar.js in the components directory:

import Link from 'next/link';
import styles from '../styles/Navbar.module.css';

const Navbar = () => {
  return (
    <nav className={styles.navbar}>
      <ul>
        <li>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
        <li>
          <Link href="/projects">
            <a>Projects</a>
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

This component uses the Link component from Next.js to create navigation links. Now, create a new file called Navbar.module.css in the styles directory and add the following CSS:

.navbar {
  background-color: #333;
  padding: 1rem 0;
}

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.navbar li {
  margin: 0 1rem;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
}

.navbar a:hover {
  background-color: #555;
}

This CSS styles the navigation bar. Now, import the Navbar component into your pages. For example, in pages/index.js, add the following import at the top of the file:

import Navbar from '../components/Navbar';

And then add the <Navbar /> component above the <main> section. Do the same for the about and projects pages.

Adding Project Details

Let’s add some actual project details to the projects page. Modify the pages/projects.js file:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Projects() {
  const projects = [
    {
      title: 'Project 1',
      description: 'A brief description of Project 1.',
      link: '#',
    },
    {
      title: 'Project 2',
      description: 'A brief description of Project 2.',
      link: '#',
    },
    // Add more projects as needed
  ];

  return (
    <div className={styles.container}>
      <Head>
        <title>Projects - Your Name</title>
        <meta name="description" content="Your Name's Projects" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Projects
        </h1>
        <ul>
          {projects.map((project, index) => (
            <li key={index}>
              <h3>{project.title}</h3>
              <p>{project.description}</p>
              <a href={project.link} target="_blank" rel="noopener noreferrer">View Project</a>
            </li>
          ))}
        </ul>
      </main>

      <footer className={styles.footer}>
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
        >
          Your Name © {new Date().getFullYear()}
        </a>
      </footer>
    </div>
  );
}

In this code, we’ve added a projects array to store project data. You can customize this array with your project titles, descriptions, and links. The code then maps over the projects array and renders each project as a list item.

Adding Images (Optional)

Images can significantly enhance your portfolio. Next.js provides an optimized Image component for handling images efficiently. First, place your images in the public directory. For example, if you want to add an image to your about page, put the image file (e.g., profile.jpg) in the public directory.

Then, in pages/about.js, import the Image component and use it like this:

import Image from 'next/image';
import profilePic from '../public/profile.jpg';

export default function About() {
  return (
    <div className={styles.container}>
      <Head>
        <title>About - Your Name</title>
        <meta name="description" content="About Your Name" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          About Me
        </h1>
        <Image
          src={profilePic}
          alt="Your Profile Picture"
          width={200}
          height={200}
        />
        <p className={styles.description}>
          Write a brief description about yourself, your skills, and your experience here.
        </p>
      </main>

      <footer className={styles.footer}>
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
        >
          Your Name © {new Date().getFullYear()}
        </a>
      </footer>
    </div>
  );
}

The Image component automatically optimizes the image for different devices and provides features like lazy loading. Remember to adjust the width and height attributes to match your image dimensions.

Deployment

Once you’ve finished building your portfolio, you’ll want to deploy it so that it’s accessible online. Vercel, the company behind Next.js, offers a seamless deployment experience. Here’s how to deploy your portfolio to Vercel:

1. Push Your Code to a Git Repository

If you haven’t already, push your code to a Git repository (e.g., GitHub, GitLab, or Bitbucket).

git init
git add .
git commit -m "Initial commit"
git remote add origin <your_repository_url>
git push -u origin main

2. Deploy to Vercel

Go to Vercel’s website (vercel.com) and sign up if you don’t have an account. Then, follow these steps:

  • Click “Add New Project.”
  • Import your Git repository.
  • Vercel will automatically detect that it’s a Next.js project and configure the build settings.
  • Click “Deploy.”

Vercel will build and deploy your portfolio. Once the deployment is complete, you’ll receive a unique URL where your portfolio is live.

You can also configure a custom domain in Vercel to use your own domain name.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building Next.js portfolios and how to fix them:

  • Incorrect File Paths: Ensure your file paths are correct, especially when importing components or images. Double-check the relative paths.
  • Missing or Incorrect Imports: Make sure you import all necessary components and modules correctly. For example, forgetting to import the Link component from next/link.
  • CSS Conflicts: If you’re using CSS Modules, make sure you’re using the correct class names. Also, be aware of potential conflicts with global styles.
  • SEO Issues: Remember to include <Head> component with appropriate title and meta tags in each page to improve SEO.
  • Image Optimization Problems: When using the Image component, make sure you provide the correct width and height attributes to prevent layout shifts.
  • Deployment Errors: Check your deployment logs for any errors. Common issues include missing environment variables or incorrect build commands.

Key Takeaways

Building a portfolio with Next.js is a rewarding project that combines modern web development practices with the ability to showcase your skills effectively. By following the steps outlined in this guide, you can create a professional-looking and high-performing portfolio website that will impress potential clients and employers. Remember to customize the content and design to reflect your unique brand and style.

Optional FAQ

Here are some frequently asked questions about building a Next.js portfolio:

1. How do I add a contact form to my portfolio?

You can add a contact form by creating an API route in Next.js to handle form submissions. This involves setting up a form in your HTML, handling the form submission in a React component, and sending the data to an API route. The API route would then process the data (e.g., send an email) and return a response to the client. There are many libraries and services that can help with the backend, such as SendGrid, Formspree, or Netlify Forms.

2. How can I make my portfolio responsive?

Next.js is built on React, and you can use standard React techniques for making your portfolio responsive. This includes using CSS media queries, responsive design frameworks (like Bootstrap or Tailwind CSS), or CSS-in-JS solutions. Ensure your layout adapts to different screen sizes to provide a good user experience on all devices.

3. How do I add a blog to my portfolio?

You can integrate a blog into your Next.js portfolio in several ways. You can create a new page for your blog posts and fetch content from a headless CMS (like Contentful or Strapi), use Markdown files, or integrate with a platform like Medium or Dev.to. For a simple solution, you can create a blog directory in your pages directory, where each file represents a blog post. Then, use Markdown to write your blog posts and render them using a library like remark or markdown-to-jsx.

4. How can I improve my portfolio’s SEO?

To improve your portfolio’s SEO, make sure to use descriptive titles and meta descriptions, optimize your images (using the Next.js Image component), and create a sitemap.xml file. Also, ensure your website is mobile-friendly and fast-loading. Use semantic HTML tags and structure your content logically. Consider using a tool like Google Search Console to monitor your website’s performance and identify any SEO issues.

5. Where can I find free portfolio templates for Next.js?

There are many free portfolio templates available for Next.js. You can find them on platforms like GitHub, CodePen, and Dribbble. Search for “Next.js portfolio template” or “React portfolio template” to find options that suit your needs. Remember to customize the template to match your brand and style.

Building a portfolio website is an ongoing process. As you gain more experience and your skills evolve, you can continuously update and improve your portfolio to reflect your latest work and expertise. Regularly update your projects, add new content, and experiment with different designs to keep your portfolio fresh and engaging. It’s an investment that pays off by showcasing your abilities and opening doors to new opportunities. Remember to always prioritize user experience, making your portfolio easy to navigate and visually appealing. By staying current with web development trends and continuously refining your presentation, you’ll ensure that your portfolio remains a powerful tool in your professional journey.

More posts