Building a Portfolio Website with NEXT.js: Showcasing Your Skills

In today’s digital world, having a strong online presence is crucial, especially for professionals in the creative and technical fields. Whether you are a web developer, designer, photographer, writer, or any other creative professional, a well-crafted portfolio website can play a significant role in showcasing your skills and attracting potential clients or employers.

In this tutorial, we’ll dive into building a portfolio website using NEXT.js, a popular React framework known for its server-side rendering (SSR) capabilities and efficient routing. Combining the power of React with NEXT.js’ SSR, you’ll be able to create a performant and SEO-friendly portfolio website that demonstrates your abilities and projects in the best possible way.

Why Use NEXT.js for Your Portfolio?

NEXT.js is an excellent choice for building portfolio websites for several reasons:

• Server-Side Rendering (SSR): NEXT.js enables server-side rendering, ensuring that your portfolio pages are pre-rendered on the server and delivered to users as fully rendered HTML. This not only improves the website’s performance but also enhances search engine optimization (SEO).

• Fast Page Loading: With SSR and optimized code splitting, NEXT.js ensures fast initial page loads and smooth navigation, which is essential to engage visitors and keep them exploring your portfolio.

• Efficient Routing: NEXT.js provides a straightforward and flexible routing system, making it easy to create and manage different pages for your portfolio.

• SEO-friendly: As mentioned earlier, NEXT.js SSR benefits your portfolio website by being more SEO-friendly, leading to better visibility on search engines like Google.

• Responsive by Default: Building a responsive portfolio website is essential to cater to users on various devices. With NEXT.js and React, creating responsive designs becomes more accessible and efficient.

• Large Community Support: NEXT.js has a vibrant community that actively contributes to the framework’s development, ensuring continuous improvement and a wealth of resources to help you throughout your project.

Now that we understand why NEXT.js is a great choice for your portfolio website, let’s dive into the step-by-step process of building one.

Prerequisites

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

• Node.js and npm: Ensure you have Node.js and npm (Node Package Manager) installed on your system to set up and manage dependencies.

• Text Editor: You’ll need a text editor to write and modify your code. Choose any code editor of your preference; popular choices include Visual Studio Code, Sublime Text, or Atom.

• Basic Knowledge of React: Familiarity with React will be beneficial, as NEXT.js is built on top of React, and we’ll be using React components to build our portfolio.

Step 1: Setting Up the Project

To begin, let’s create a new NEXT.js project for our portfolio website. Open your terminal and run the following commands:

bash
npx create-next-app my-portfolio
cd my-portfolio

This will create a new NEXT.js project in a directory named “my-portfolio” and navigate you into the project’s root directory.

Step 2: Folder Structure

NEXT.js follows a specific folder structure to organize your project effectively. Let’s go through the essential folders we’ll be using:

• pages: This folder holds all the pages of your portfolio website. Each JavaScript or JSX file inside this folder becomes a page with a unique route.

• public: This folder is used to store static assets like images, fonts, or other files you want to use in your portfolio.

• styles: Here, you can define global styles or use CSS modules for specific components.

• components: This folder will contain all the React components we’ll create for various sections of the portfolio.

• utils: The utils folder is used to store utility functions or helper scripts that your project might need.

Once you have a good understanding of the folder structure, we can proceed to the next step.

Step 3: Designing the Layout

The layout of your portfolio plays a crucial role in showcasing your skills and projects. In this tutorial, we’ll create a simple layout with a header, footer, and a main content area where we’ll display our projects.

First, let’s create a new folder inside the components directory called “Layout.” Inside the Layout folder, create a file named “Header.js” and add the following code:

jsx
// components/Layout/Header.js

import React from 'react';

const Header = () => {
  return (
    <header>
      {/* Add your header content here */}
      <h1>My Portfolio</h1>
      <nav>
        {/* Add navigation links here */}
        <a href="/">Home</a>
        <a href="/projects">Projects</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </nav>
    </header>
  );
};

export default Header;

In this code, we’re creating a simple header component with navigation links for Home, Projects, About, and Contact pages.

Next, let’s create a file named “Footer.js” inside the same Layout folder:

jsx
// components/Layout/Footer.js

import React from 'react';

const Footer = () => {
  return (
    <footer>
      {/* Add your footer content here */}
      <p>&copy; 2023 My Portfolio. All rights reserved.</p>
    </footer>
  );
};

export default Footer;

The footer component contains copyright information for your portfolio website.

Now that we have our header and footer components, let’s move on to the main content area of the portfolio.

Step 4: Creating Project Cards

In the main content area of our portfolio, we want to display our projects in an organized and visually appealing manner. For this, we’ll create a “ProjectCard” component that we can reuse for each project.

Inside the components folder, create a new folder named “ProjectCards.” In this folder, create a file named “ProjectCard.js” and add the following code:

jsx
// components/ProjectCards/ProjectCard.js

import React from 'react';

const ProjectCard = ({ project }) => {
  const { title, description, imageUrl, liveUrl, sourceUrl } = project;

  return (
    <div className="project-card">
      <img src={imageUrl} alt={title} />
      <h2>{title}</h2>
      <p>{description}</p>
      <div className="project-links">
        <a href={liveUrl} target="_blank" rel="noopener noreferrer">Live Demo</a>
        <a href={sourceUrl} target="_blank" rel="noopener noreferrer">Source Code</a>
      </div>
    </div>
  );
};

export default ProjectCard;

The ProjectCard component will render an individual project card with its title, description, image, and links to the live demo and source code.

Step 5: Fetching Project Data

For the purpose of this tutorial, we’ll use mock project data to simulate real projects. However, in a real-world scenario, you would fetch project data from an API or a database.

Create a new folder named “data” in the root directory of your project and add a file named “projects.js” inside it:

javascript
// data/projects.js

const projects = [
  {
    title: 'Project 1',
    description: 'Description for Project 1',
    imageUrl: '/images/project1.jpg',
    liveUrl: 'https://www.example.com/project1',
    sourceUrl: 'https://github.com/username/project1',
  },
  {
    title: 'Project 2',
    description: 'Description for Project 2',
    imageUrl: '/images/project2.jpg',
    liveUrl: 'https://www.example.com/project2',
    sourceUrl: 'https://github.com/username/project2',
  },
  // Add more project objects here
];

export default projects;

This file contains an array of project objects, where each object represents a project with its title, description, image URL, live demo URL, and source code URL.

Step 6: Displaying Projects

Now that we have our ProjectCard component and mock project data, let’s use them to display our projects on the portfolio page.

Open the “pages” folder and create a new file named “projects.js.” In this file, add the following code:

jsx
// pages/projects.js

import React from 'react';
import ProjectCard from '../components/ProjectCards/ProjectCard';
import projects from '../data/projects';

const ProjectsPage = () => {
  return (
    <div className="projects-container">
      <h2>Projects</h2>
      <div className="project-cards">
        {projects.map((project, index) => (
          <ProjectCard key={index} project={project} />
        ))}
      </div>
    </div>
  );
};

export default ProjectsPage;

In this code, we’re importing the ProjectCard component and the project data from the “data” folder. The ProjectsPage component then maps through the projects array and renders a ProjectCard for each project in the data.

Step 7: Styling the Portfolio Website

To make our portfolio visually appealing, let’s add some basic styles using CSS. For simplicity, we’ll use CSS modules to scope the styles to specific components.

In the root directory of your project, create a new folder named “styles.” Inside the “styles” folder, create a file named “global.css” and add the following styles:

css
/* styles/global.css */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 16px;
  text-align: center;
}

nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 16px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

In this CSS file, we’ve defined styles for the header and footer, giving them a consistent appearance throughout the portfolio website.

Next, let’s create styles specific to the ProjectsPage component. In the “styles” folder, create a new file named “projects.module.css”:

css
/* styles/projects.module.css */

.projects-container {
  padding: 16px;
}

.projects-container h2 {
  text-align: center;
}

.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.project-card {
  border: 1px solid #ddd;
  padding: 16px;
}

.project-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.project-card h2 {
  margin-top: 8px;
}

.project-links {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}

In this CSS module, we’re styling the ProjectsPage component and the ProjectCard component to create a grid of project cards with appropriate spacing and layout.

Step 8: Completing the Layout

Now that we have the header, footer, and project cards set up, let’s combine them all in a layout that represents our portfolio website.

In the “pages” folder, open the “index.js” file, and replace its content with the following:

jsx
// pages/index.js

import React from 'react';
import Header from '../components/Layout/Header';
import Footer from '../components/Layout/Footer';

const HomePage = () => {
  return (
    <>
      <Header />
      <div className="home-container">
        <h1>Welcome to My Portfolio</h1>
        {/* Add additional sections for an introduction, skills, or testimonials */}
      </div>
      <Footer />
    </>
  );
};

export default HomePage;

This code imports the Header and Footer components and adds them to the homepage. We’ve also added a “home-container” div to represent the main content area of the homepage.

Step 9: Adding More Pages

As your portfolio grows, you may want to add additional pages like “About,” “Contact,” or pages to showcase specific projects in more detail. To create these pages, follow a similar process as we did for the “Projects” page:

1. Create new files in the “pages” folder, such as “about.js” and “contact.js.”

1. Design and implement the content for each page using React components and CSS styles.

1. Add links to these pages in the header component to enable navigation.

Step 10: Deployment

Once you’ve completed building and testing your portfolio website, it’s time to deploy it to the web so that others can access it. There are various hosting options available, such as Vercel, Netlify, or GitHub Pages. Choose the one that best suits your needs and follow their deployment instructions.

Conclusion

In this tutorial, we’ve learned how to build a portfolio website using NEXT.js to showcase your skills and projects effectively. By combining the power of React, SSR, and efficient routing, NEXT.js provides a performant and SEO-friendly solution for creating an impressive online presence. Remember to continually update your portfolio with new projects and keep it well-maintained to impress potential clients or employers and stand out in the competitive digital world. Happy coding!