[Complete Guide] How to create a simple portfolio website using Next.js

programming

Do you want to create a portfolio website but are unsure which technology to choose?

Next.js is a React-based framework that supports static site generation and server-side rendering, making it ideal for building portfolio websites. 

In this article, we'll show you step-by-step how to build a simple yet effective portfolio website using Next.js.

This will be a practical guide for those who aim for efficient development while placing importance on design and functionality.

What is Next.js?

Next.js is a framework that extends the functionality of React and enables server-side rendering and static site generation. 

This will improve your SEO and performance.

Main features

Static Site Generation (SSG): Generates HTML at build time for faster loading.

Server-Side Rendering (SSR)Generates HTML when requested and handles dynamic content.

API Route: Backend functions can be implemented within the same project.

File-Based Routing: Routing is done automatically based on the directory structure.

Building a development environment

Installing Necessary Tools

First, make sure you have Node.js and npm installed. 

Next, create a Next.js project with the following command: 

1
npx create-next-app@latest my-portfolio cd my-portfolio npm run dev

This will start the local server and you can view your application at http://localhost:3000.

Initial Project Setup

Check the directory configuration

The project generated by create-next-app contains the following directories:

pages/: Place the page component.

public/Place static files such as images and fonts here.

styles/: Place the CSS file. 

Introducing TypeScript (optional)

If you are using TypeScript, install the required packages with the following command:

1
npm install --save-dev typescript @types/react @types/node

Then restart your project and tsconfig.json will be auto-generated.

Creating Pages and Routing

Creating a Home Page

pages/index.jsEdit to create the content for your home page.

1
2
3
4
5
6
7
export default function Home() { return (
    <div>
      <h1>Welcome to my portfolio</h1>
      <p>This is where you introduce yourself and give an overview of your project.</p>
    </div>
  );
}

Adding other pages

pages/about.js and pages/projects.jsetc. and add the pages you need.

Next.js will automatically route files in the pages/ directory. 

Implementing styling

Using CSS Modules

Next.js allows you to apply styles on a per-component basis using CSS Modules. 

for example,Create styles/Home.module.css and write it as follows:

1
.title { color: blue; font-size: 2rem; }

And then import it in your component and use it:

1
2
import styles from &#039;../styles/Home.module.css&#039;; export default function Home() { return <h1 classname="{styles.title}">Welcome to my portfolio</h1>;
}

Installing Tailwind CSS (Optional)

Efficient styling is possible using Tailwind CSS.

Please refer to the official documentation for installation instructions.

Deploy and publish

Deploying to Vercel

Next.js is highly compatible with Vercel and can be easily deployed. 

1. Create a Vercel account and connect it to GitHub.

2. Select the repository and perform the deployment.

3. Once the deployment is complete, you will be issued a unique URL.

For detailed instructions, please refer to the official Vercel documentation.

summary

Next.js allows you to build an efficient and high-quality portfolio website.

Follow the steps outlined in this article to create your own portfolio website.

Aim to further improve your skills by customizing the design and functions.

Copied title and URL