Build A Simple Personal Portfolio Website With Next.js

In today’s digital landscape, a personal portfolio website is more than just a nice-to-have; it’s a necessity. It’s your online resume, a showcase of your skills, and a direct line to potential clients or employers. But building a website can seem daunting, especially if you’re not a seasoned developer. This guide walks you through building a simple, yet effective, personal portfolio website using Next.js, a powerful React framework that simplifies web development. We’ll break down the process step-by-step, making it accessible for beginners while providing enough detail to benefit intermediate developers. You’ll learn how to create a visually appealing and functional website, understand key concepts, and avoid common pitfalls.

Why Next.js?

Next.js offers several advantages for building a portfolio website:

Server-Side Rendering (SSR) and Static Site Generation (SSG): This improves SEO and performance by pre-rendering your website’s content, making it load faster and more accessible to search engines.
React-Based: If you know React, you’re already halfway there. Next.js extends React with features like routing and image optimization.
Easy Deployment: Deploying a Next.js website is straightforward, often requiring just a few commands.
Built-in Features: Next.js includes features like image optimization, API routes, and more, saving you time and effort.

Project Overview: What We’ll Build

We’ll create a simple portfolio website with the following sections:

Home: A brief introduction, your name, and a compelling headline.
About: A short biography and details about your skills.
Projects: Showcase of your work with project titles, descriptions, and links.
Contact: A contact form or contact information.

Prerequisites

Before we begin, ensure you have the following installed:

Node.js and npm (or yarn): You’ll use these for package management and running your development server.
A Code Editor: Visual Studio Code, Sublime Text, or any editor you prefer.
Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these languages is helpful, but we’ll explain the key concepts.

Step-by-Step Guide

1. Setting Up Your Next.js Project

Open your terminal and run the following command to create a new Next.js project. We’ll name our project “my-portfolio”:

npx create-next-app my-portfolio

This command sets up a basic Next.js project with all the necessary dependencies. Navigate into your project directory:

cd my-portfolio

2. Project Structure

Let’s take a look at the project structure:

pages/: This is where you’ll create your pages. Each file in this directory becomes a route (e.g., `pages/index.js` becomes `/`).
public/: This directory is for static assets like images, fonts, and other files.
styles/: This directory contains your CSS files.
package.json: Contains your project’s dependencies and scripts.

3. Creating the Home Page (index.js)

Open `pages/index.js` in your code editor. This is the home page of your website. Replace the default content with your introduction:

function HomePage() {
  return (
    <div>
      <h1>Your Name</h1>
      <p>Your Headline (e.g., Web Developer, UI/UX Designer)</p>
      <p>A brief introduction about yourself.</p>
    </div>
  );
}

export default HomePage;

Explanation:

This is a React component.
`<h1>` and `<p>` are HTML elements for the heading and paragraph.
Replace “Your Name”, “Your Headline”, and the paragraph with your information.

4. Creating the About Page (about.js)

Create a new file named `pages/about.js` and add the following content:

function AboutPage() {
  return (
    <div>
      <h2>About Me</h2>
      <p>Your biography and skills.</p>
      <ul>
        <li>Skill 1</li>
        <li>Skill 2</li>
        <li>Skill 3</li>
      </ul>
    </div>
  );
}

export default AboutPage;

Explanation:

This is another React component.
`<h2>` is for the heading of the about section.
Replace the placeholder text and skills with your actual information.

5. Creating the Projects Page (projects.js)

Create a new file named `pages/projects.js` and add the following content:

function ProjectsPage() {
  return (
    <div>
      <h2>Projects</h2>
      <div>
        <h3>Project Title 1</h3>
        <p>Project Description 1.  Include a link to the project.</p>
      </div>
      <div>
        <h3>Project Title 2</h3>
        <p>Project Description 2. Include a link to the project.</p>
      </div>
    </div>
  );
}

export default ProjectsPage;

Explanation:

This component displays your projects.
Replace the placeholders with your project titles, descriptions, and links.
You can add more `div` elements for each project.

6. Creating the Contact Page (contact.js)

Create a new file named `pages/contact.js` and add the following content:

function ContactPage() {
  return (
    <div>
      <h2>Contact Me</h2>
      <p>Email: your.email@example.com</p>
      <p>LinkedIn: <a href="your_linkedin_profile_url">Your LinkedIn</a></p>
    </div>
  );
}

export default ContactPage;

Explanation:

This component provides your contact information.
Replace the placeholders with your email and LinkedIn profile URL. You can also include a contact form here.

7. Creating the Navigation Bar (components/Navbar.js)

Create a `components` directory in your project’s root and then create a file named `Navbar.js` inside it. This will house our navigation bar component. This is a great example of reusability in Next.js.

import Link from 'next/link';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link href="/">Home</Link></li>
        <li><Link href="/about">About</Link></li>
        <li><Link href="/projects">Projects</Link></li>
        <li><Link href="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default Navbar;

Explanation:

We import `Link` from `next/link`. This component is used for client-side navigation within your Next.js application, preventing full page reloads.
The `<nav>` element contains an unordered list (`<ul>`) with list items (`<li>`) for each navigation link.
`<Link href=”/”>` creates a link to the home page. The text “Home” is displayed. Clicking it will navigate to the `pages/index.js` file.
Repeat the `<Link>` elements for the other pages, pointing to `/about`, `/projects`, and `/contact`.

8. Integrating the Navigation Bar

Now, let’s include the `Navbar` component in each of our pages. Open each page file (`pages/index.js`, `pages/about.js`, `pages/projects.js`, and `pages/contact.js`) and modify them to include the navigation bar. For example, here’s how you would modify `pages/index.js`:

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

function HomePage() {
  return (
    <div>
      <Navbar />
      <h1>Your Name</h1>
      <p>Your Headline</p>
      <p>A brief introduction about yourself.</p>
    </div>
  );
}

export default HomePage;

Explanation:

We import the `Navbar` component using `import Navbar from ‘../components/Navbar’;`. The `../` indicates that we’re going up one directory level to access the `components` directory.
We then include the `<Navbar />` component within the main `<div>` of the page. This renders the navigation bar at the top of the page.
Repeat this process for all your other pages (about.js, projects.js, contact.js), ensuring the navigation bar is consistently displayed.

9. Styling with CSS

Next.js supports several ways to style your website. We’ll use the simplest approach: CSS Modules.

Create a file named `styles/global.css` and add the following code for some basic styling:

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  color: #333;
}

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

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

nav li {
  margin: 0 1rem;
}

nav a {
  color: white;
  text-decoration: none;
}

/* Add more styles as needed */

To apply these global styles, import the CSS file into `pages/_app.js`. If the file doesn’t exist, create it in the `pages` directory. This file is used to initialize your application.

import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

You can also use CSS Modules for component-specific styling. For example, to style the `HomePage`, create a file named `pages/index.module.css` and add your styles there. Then, import and use these styles within your `index.js` component.

// index.js
import styles from '../styles/index.module.css';

function HomePage() {
  return (
    <div className={styles.container}>
      <h1>Your Name</h1>
      <p>Your Headline</p>
      <p>A brief introduction about yourself.</p>
    </div>
  );
}

export default HomePage;

/* index.module.css */
.container {
  padding: 2rem;
  text-align: center;
}

Explanation:

The `import styles from ‘../styles/index.module.css’;` line imports the CSS Modules styles.
`className={styles.container}` applies the styles defined in `index.module.css` to the `<div>` element.

10. Adding Images

To add images, place them in the `public` folder. You can then reference them in your components using the file name. For example:

<img src="/your-image.jpg" alt="Your Image" />

Next.js also provides an `Image` component for optimized image loading. Import it from `next/image`:

import Image from 'next/image'

function HomePage() {
  return (
    <div>
      <Image
        src="/your-image.jpg"
        alt="Your Image"
        width={500}
        height={300}
      />
    </div>
  )
}

export default HomePage

Explanation:

The `Image` component automatically optimizes your images for different screen sizes and formats.
`src` is the path to your image in the `public` folder.
`alt` is the alternative text for accessibility.
`width` and `height` are required for the `Image` component to work correctly.

11. Running Your Project

In your terminal, run the following command to start the development server:

npm run dev

yarn dev

This will start the development server, usually on `http://localhost:3000`. Open this address in your browser to see your portfolio website. As you make changes to your code, the browser will automatically refresh.

12. Deployment

Next.js makes deployment easy. You can deploy to platforms like Vercel (recommended, as it’s created by the Next.js team), Netlify, or other hosting providers. Here’s how to deploy to Vercel:

Create a Vercel Account: Sign up for a free Vercel account at https://vercel.com/.
Connect to Your Git Repository: Connect your GitHub, GitLab, or Bitbucket repository to Vercel. Vercel will automatically detect that it’s a Next.js project.
Deploy: Vercel will build and deploy your website automatically. You’ll get a URL to access your live portfolio.

For other deployment options, refer to the Next.js documentation.

Common Mistakes and How to Fix Them

Incorrect File Paths: Double-check your file paths, especially when importing components, images, and CSS files. Use relative paths correctly (e.g., `../components/Navbar.js`).
Missing or Incorrect CSS Modules Imports: Make sure you’re importing CSS Modules correctly and applying the class names to your HTML elements.
Image Optimization Issues: If images aren’t displaying correctly with the `Image` component, ensure you’ve specified the `width` and `height` attributes. Also, verify that the image is in the `public` folder.
Routing Errors: If your pages aren’t rendering, check that you’ve created the correct files in the `pages` directory and that your navigation links are pointing to the correct paths.
Deployment Problems: If your site isn’t deploying, review the deployment logs for any errors. Common issues include missing environment variables or incorrect build commands.

SEO Best Practices

Search Engine Optimization (SEO) is crucial for your portfolio website to be found by potential clients or employers. Here are some key SEO practices:

Use Descriptive Titles and Meta Descriptions: In the `<head>` section of each page, add a descriptive `<title>` tag and a concise `<meta name=”description” content=”Your portfolio description.”>` tag.
Optimize Headings: Use `<h1>` for the main heading, and `<h2>`, `<h3>`, etc., for subheadings.
Use Alt Text for Images: Always provide descriptive `alt` text for your images.
Create a Sitemap: Generate a sitemap (e.g., using `next-sitemap`) and submit it to search engines.
Use Keywords Naturally: Incorporate relevant keywords in your content naturally, without overstuffing.
Ensure Mobile Responsiveness: Make sure your website is responsive and looks good on all devices.
Improve Site Speed: Optimize images, use server-side rendering, and minimize code to improve site speed. Next.js helps with this out of the box.

Key Takeaways

Next.js simplifies building a portfolio website with its features like SSR, SSG, and easy deployment.
The project structure is straightforward, with pages in the `pages` directory becoming routes.
CSS Modules and the `Image` component are powerful tools for styling and image optimization.
Deployment to platforms like Vercel is streamlined.
Prioritize SEO best practices to ensure your website is discoverable.

FAQ

Q: Can I use a database with this portfolio?

A: Yes, you can integrate a database to store project data, contact form submissions, or other dynamic content. Next.js offers API routes for backend logic and can be used with various database solutions like MongoDB, PostgreSQL, or others.

Q: How can I add a contact form?

A: You can use a third-party service like Formspree or Netlify Forms, or you can create a custom contact form using Next.js API routes to handle form submissions and send emails.

Q: How do I handle different screen sizes?

A: Use CSS media queries in your CSS files (e.g., `index.module.css`) to adjust the layout and styling for different screen sizes. Ensure your website is responsive.

Q: How can I add animations and transitions?

A: You can use CSS transitions and animations or libraries like Framer Motion or GSAP to add animations and transitions to your website.

Q: Where can I find more Next.js examples?

A: The Next.js documentation is excellent. Also, search for “Next.js portfolio templates” to find examples and templates you can adapt.

Building a personal portfolio website with Next.js is a rewarding project. It allows you to showcase your skills, learn new technologies, and establish an online presence. By following these steps, you’ve created a foundation upon which you can build and refine your online identity. Remember, your portfolio is a living document; it should evolve as your skills and projects grow. Keep updating it, experimenting with new features, and refining the design to best represent your work. The initial effort, as you’ve seen, is relatively small, but the ongoing benefits to your career can be substantial. Keep building, keep learning, and keep showcasing your talents to the world.

Build a Simple Personal Portfolio Website with Next.js

Why Next.js?

Project Overview: What We’ll Build

Prerequisites

Step-by-Step Guide

1. Setting Up Your Next.js Project

2. Project Structure

3. Creating the Home Page (index.js)

4. Creating the About Page (about.js)

5. Creating the Projects Page (projects.js)

6. Creating the Contact Page (contact.js)

7. Creating the Navigation Bar (components/Navbar.js)

8. Integrating the Navigation Bar

9. Styling with CSS

10. Adding Images

11. Running Your Project

12. Deployment

Common Mistakes and How to Fix Them

SEO Best Practices

Key Takeaways

FAQ

Q: Can I use a database with this portfolio?

Q: How can I add a contact form?

Q: How do I handle different screen sizes?

Q: How can I add animations and transitions?

Q: Where can I find more Next.js examples?

More posts

Build a Simple Next.js Interactive Survey App: A Beginner’s Guide

Build a Simple Next.js Interactive Code Snippet Sharing App

Build a Simple Next.js Interactive File Uploader App

Build a Simple Next.js Interactive Credit Card Validator