Build a Next.js Interactive Web-Based Portfolio

Written by

javascriptdebugged

in

In today’s digital landscape, a compelling online portfolio is essential for showcasing your skills and projects. Whether you’re a developer, designer, writer, or any creative professional, a well-crafted portfolio serves as your digital storefront, attracting potential clients and employers. While platforms like Behance or Dribbble are useful, a personalized portfolio gives you complete control over your brand and presentation. This tutorial will guide you through building an interactive web-based portfolio using Next.js, a powerful React framework, enabling you to create a dynamic and engaging online presence.

Why Next.js?

Next.js offers several advantages for building a portfolio:

  • Server-Side Rendering (SSR) and Static Site Generation (SSG): Improve SEO and initial load times, crucial for user experience.
  • Built-in Routing: Simplifies navigation and page management.
  • Optimized Performance: Features like image optimization and code splitting ensure a fast and responsive website.
  • Developer Experience: Features like hot reloading and a streamlined development workflow.
  • React Ecosystem: Leverages the vast React ecosystem, giving you access to countless libraries and components.

Project Overview: Interactive Portfolio

Our portfolio will include the following features:

  • Homepage: Introduces you and highlights your key skills.
  • Projects Section: Showcases your projects with descriptions, images, and links.
  • About Me Section: Provides more detailed information about your background and experience.
  • Contact Section: Allows visitors to reach out to you.
  • Responsive Design: Ensures a seamless experience on all devices.

Prerequisites

Before we begin, make sure you have the following installed:

  • Node.js and npm (or yarn): Required to run Next.js and manage dependencies.
  • A code editor: VS Code, Sublime Text, or any other editor of your choice.
  • Basic knowledge of HTML, CSS, and JavaScript: Familiarity with React is helpful but not strictly required.

Step-by-Step Guide

1. Setting Up the Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app portfolio-app

This command creates a new directory called portfolio-app with the basic Next.js project structure. Navigate into the project directory:

cd portfolio-app

2. Project Structure and File Organization

Next.js has a specific structure for organizing your files. Here’s a quick overview:

  • pages/: Contains your pages. Each file in this directory represents a route (e.g., pages/index.js becomes /, pages/about.js becomes /about).
  • components/: Where you’ll put reusable React components.
  • styles/: For your CSS or other styling files.
  • public/: Contains static assets like images, fonts, and other files.
  • next.config.js: Configuration file for Next.js.

3. Creating the Homepage (pages/index.js)

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

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

export default function Home() {
  return (
    <div>
      
        <title>Your Name | Portfolio</title>
        
        
      

      <main>
        <h1>
          Welcome to My Portfolio!
        </h1>

        <p>
          I'm a passionate web developer with a focus on creating beautiful and functional user experiences.
        </p>

        <div>
          <a href="#">
            <h2>Projects →</h2>
            <p>View my recent projects and see what I've been working on.</p>
          </a>

          <a href="#">
            <h2>About Me →</h2>
            <p>Learn more about my background, skills, and experience.</p>
          </a>

          <a href="#">
            <h2>Contact →</h2>
            <p>Get in touch and discuss potential opportunities.</p>
          </a>
        </div>
      </main>

      <footer>
        <a href="#" target="_blank" rel="noopener noreferrer">
          Powered by Next.js
        </a>
      </footer>
    </div>
  );
}

This code defines the homepage structure, including the title, meta description for SEO, and basic content. Note the use of the Head component for setting the page title and meta description, crucial for SEO.

Now, create a file named Home.module.css inside the styles/ directory. Paste the following CSS:

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

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

.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;
}

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

.title, .description {
  text-align: center;
}

.description {
  line-height: 1.5;
  font-size: 1.5rem;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
  margin-top: 3rem;
}

.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  width: 300px;
}

.card:hover, .card:focus, .card:active {
  color: #0070f3;
  border-color: #0070f3;
}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.card p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

This CSS styles the homepage elements. We’re using CSS Modules (.module.css) to ensure that the styles are scoped to this component, preventing style conflicts. Run npm run dev in your terminal to start the development server and view the homepage at http://localhost:3000.

4. Creating the About Me Page (pages/about.js)

Create a new file named about.js inside the pages/ directory. Add the following code:

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

export default function About() {
  return (
    <div>
      
        <title>About Me | Your Name</title>
        
        
      

      <main>
        <h1>About Me</h1>

        <p>
          Write a brief paragraph about yourself, your skills, and your passion for your field.
        </p>

        {/* Add more content about your experience, education, etc. here */}
      </main>
    </div>
  );
}

Create a file named About.module.css inside the styles/ directory. Add some basic styling for the About page. You can adapt it from the Home.module.css file, or create custom styles:

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

.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: 3rem;
}

.description {
  font-size: 1.2rem;
  margin-bottom: 20px;
  max-width: 800px;
}

Now, you can access your About Me page at http://localhost:3000/about. Note that the page title and meta description are customized for this page, improving SEO.

5. Creating the Projects Page (pages/projects.js)

Create a new file named projects.js inside the pages/ directory. This page will display your projects. Here’s an example:

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

export default function Projects() {
  const projects = [
    {
      title: 'Project 1',
      description: 'A brief description of Project 1.',
      imageUrl: '/project1.png', // Place images in the public folder
      link: '#',
    },
    {
      title: 'Project 2',
      description: 'A brief description of Project 2.',
      imageUrl: '/project2.png',
      link: '#',
    },
    // Add more projects here
  ];

  return (
    <div>
      
        <title>Projects | Your Name</title>
        
        
      

      <main>
        <h1>Projects</h1>

        <div>
          {projects.map((project, index) => (
            <a href="{project.link}">
              <img src="{project.imageUrl}" alt="{project.title}" />
              <h2>{project.title} →</h2>
              <p>{project.description}</p>
            </a>
          ))}
        </div>
      </main>
    </div>
  );
}

This code defines a projects array to store project data. It then uses the map function to iterate through the projects and render each one as a card. Make sure to add project images to the public/ folder.

Create Projects.module.css in the styles/ directory:

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

.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: 3rem;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin-top: 3rem;
}

.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  width: 300px;
}

.card:hover, .card:focus, .card:active {
  color: #0070f3;
  border-color: #0070f3;
}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.card p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

.image {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 5px;
}

Access your Projects page at http://localhost:3000/projects.

6. Creating the Contact Page (pages/contact.js)

Create a new file named contact.js inside the pages/ directory. This page will allow visitors to contact you. A simple contact form is a good starting point.

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

export default function Contact() {
  return (
    <div>
      
        <title>Contact | Your Name</title>
        
        
      

      <main>
        <h1>Contact Me</h1>

        
          <label>Name:</label>
          

          <label>Email:</label>
          

          <label>Message:</label>
          <textarea id="message" name="message" rows="5" />

          <button type="submit">Send Message</button>
        
      </main>
    </div>
  );
}

Create Contact.module.css in the styles/ directory:


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

.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: 3rem;
}

.form {
  display: flex;
  flex-direction: column;
  width: 80%;
  max-width: 600px;
}

.form label {
  margin-bottom: 5px;
  font-weight: bold;
}

.form input, .form textarea {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

.form button {
  background-color: #0070f3;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.form button:hover {
  background-color: #0056b3;
}

Access your Contact page at http://localhost:3000/contact.

7. Adding Navigation (components/Navbar.js)

To improve navigation, let’s create a reusable navigation component. Create a new directory named components in the root of your project (if it doesn’t already exist). Inside the components directory, create a file named Navbar.js:

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

export default function Navbar() {
  return (
    <nav>
      <div>Your Name</div>
      <ul>
        <li>
          
            <a>Home</a>
          
        </li>
        <li>
          
            <a>About</a>
          
        </li>
        <li>
          
            <a>Projects</a>
          
        </li>
        <li>
          
            <a>Contact</a>
          
        </li>
      </ul>
    </nav>
  );
}

Create Navbar.module.css in the styles/ directory:


.navbar {
  background-color: #f8f8f8;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.navList {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

.navList li {
  margin-left: 1rem;
}

.navList a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

.navList a:hover {
  color: #0070f3;
}

Now, import and use the Navbar component in your pages (index.js, about.js, projects.js, and contact.js):

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

export default function Home() {
  return (
    <div>
      
        <title>Your Name | Portfolio</title>
        
        
      

      

      <main>
        {/* ... rest of your homepage content ... */}
      </main>
    </div>
  );
}

Repeat the import and placement of the Navbar component in your other pages.

8. Deploying Your Portfolio

Once you’ve built your portfolio and are satisfied with its content and design, you’ll want to deploy it so it’s accessible to the world. Next.js makes deployment straightforward. Here are a couple of popular options:

  • Vercel: Vercel is the platform created by the Next.js team. It offers a seamless deployment experience with automatic builds and deployments. It’s free for personal projects. To deploy to Vercel, you’ll need to have a Vercel account. Then, simply connect your GitHub repository to Vercel, and it will automatically build and deploy your project.
  • Netlify: Netlify is another excellent platform for deploying static sites and serverless functions. It also offers automatic builds and deployments, and is free for personal projects. The process is similar to Vercel: connect your GitHub repository, and Netlify will handle the rest.
  • Other Options: Other options include platforms like AWS Amplify, Google Cloud, and traditional hosting providers.

Choose the deployment platform that best suits your needs and follow the platform’s instructions to deploy your portfolio. After deployment, you’ll have a live website that you can share with the world.

Common Mistakes and How to Fix Them

  • Incorrect File Paths: Make sure your file paths (e.g., for images, CSS modules) are correct. Double-check the relative paths in your code. Use absolute paths (starting with /) for images in the public/ folder.
  • CSS Module Conflicts: If you’re using CSS Modules, ensure you’re importing the styles correctly and applying the class names using the correct syntax (e.g., className={styles.className}).
  • Missing Dependencies: If you encounter errors related to missing modules, make sure you’ve installed all the necessary dependencies using npm install or yarn install.
  • SEO Issues: Remember to set the title and meta description tags in the Head component for each page. Use descriptive titles and descriptions that include relevant keywords. Optimize your image alt tags.
  • Deployment Errors: If you encounter deployment errors, check the platform’s documentation and logs for clues. Common issues include incorrect build commands, missing environment variables, or incorrect file paths.

Key Takeaways

  • Choose Next.js: Next.js is an excellent choice for building a modern and performant portfolio.
  • Structure Your Project: Follow the Next.js project structure for organization and maintainability.
  • Use Components: Create reusable React components to avoid code duplication.
  • Prioritize SEO: Optimize your pages for search engines by setting the title, meta description, and using relevant keywords.
  • Deploy with Confidence: Choose a deployment platform that fits your needs and deploy your portfolio for the world to see.

FAQ

  1. Can I use a different styling solution instead of CSS Modules? Yes, you can use other styling solutions like styled-components, Tailwind CSS, or plain CSS. Choose the one you’re most comfortable with.
  2. How do I add interactivity to my portfolio? You can add interactivity using JavaScript, React state, and event handlers. For example, you could add a project filter, a dark mode toggle, or animations.
  3. How can I handle form submissions on the contact page? You can use a service like Formspree or Netlify Forms to handle form submissions without needing a backend. Alternatively, you can build a serverless function to handle the form data.
  4. How do I add a blog to my portfolio? You can create a blog section by creating a new page (e.g., pages/blog.js) and displaying your blog posts. You can use a headless CMS like Contentful or Sanity to manage your blog content.
  5. How can I make my portfolio responsive? Use responsive design techniques like media queries to ensure your portfolio looks great on all devices. Test your portfolio on different screen sizes to ensure it’s responsive.

Building a web-based portfolio in Next.js offers a powerful way to showcase your skills and projects effectively. By following these steps, you can create a dynamic, engaging, and SEO-friendly online presence that will impress potential clients and employers. Remember to personalize the content, design, and features to reflect your unique brand and style, and keep it updated with your latest work. As you continue to learn and grow, your portfolio will evolve, reflecting your journey and achievements in the ever-changing digital world.

More posts