【完全ガイド】Next.jsで作る簡単ポートフォリオサイトの作り方

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.

table of contents

What is Next.js?
1. Main features
Building a development environment
1. Installing Necessary Tools
Initial Project Setup
1. Check the directory configuration
2. Introducing TypeScript (optional)
Creating Pages and Routing
1. Creating a Home Page
2. Adding other pages
Implementing styling
1. Using CSS Modules
2. Installing Tailwind CSS (Optional)
Deploy and publish
1. Deploying to Vercel
summary

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.

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:

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