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 | |
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 | |
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 | <> <> <> </> );} |
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 | : ; : 2 |
And then import it in your component and use it:
1 2 | =>;} |
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.
English 
Japanese