Next.jsを使ったポートフォリオサイトの作り方　完全ガイド

　この記事では，Next.js（フロントエンドのフレームワーク）を使ったポートフォリオサイトの作り方をハンズオン形式で解説します．

環境構築
プロジェクトの作成
1. サイトの起動
ソースファイルの編集
1. デザインテンプレートの適用
2. サイドバーの実装
Tips
ライセンス情報へのリンク

環境構築

　Node.js及びnpmの実行環境が必要です．Node.js — どこでもJavaScriptを使おうより，Node.jsをダウンロード＆インストールしてください．

プロジェクトの作成

　環境構築が済んだら，いよいよ「Next.js」プロジェクトの作成です．
以下のコマンドを実行することで，簡単にプロジェクトを作成することができます．

npx create-next-app@latest

その後，オプションについて色々と聞かれますので，それぞれ選んでいきます．

　プロジェクト名は，自分の好きな（分かりやすい）名前を設定してください．ここでは「portfolio」としています．
以降の Yes/No 形式のオプションについては，デフォルトで選択されている方を選べば問題ありません．

　プロジェクトの作成が完了したら，cdコマンドでプロジェクトファイルに移動します．

cd portfolio

サイトの起動

　ここで，試しにサイトを起動させてみます．そのまま以下のコマンドを実行してください．

npm run dev

すると，localhostが立ち上がりますので，表示されたURLにアクセスします．ポートの競合等が無い限りは，デフォルト「http://localhost:3000/」になるかと思います．

Next.jsのロゴが表示されたら成功です！

ソースファイルの編集

　上記の手順で立ち上げたページにも書いてある通り，今後は基本的に「src/app/page.tsx」というファイルを編集していくことになります．

page.tsxファイルの中身を一旦，以下の内容に書き換えてください．

import Image from "next/image";

export default function Home() {
  return (
    <h1>Portfolio</h1>
  );
}

変更が完了したら，ソースコードを上書き保存し，先ほどのページを確認します．
ページの内容がNext.jsのデフォルトページから「Portfolio」に置き換わっていれば，成功です！

デザインテンプレートの適用

　では，ここから本格的にサイト作り… と行きたいところですが，一から構成を考えて装飾していくのは大変なので，ここではWeb上で公開されているデザインテンプレートを有難く拝借させていただくことにします．（一からデザインに挑戦するのもOKです．）

今回は，有名なUIライブラリの一種である「Chakra UI」とそのテンプレートである~~「Chakra Templates」~~を導入してみます．どちらも寛容なOSSライセンスの一種である「MITライセンス」で提供されています．（ありがたい…）

ここで，以下のコマンドを実行してください．

Ctrl+C // 一旦，localhostを終了し，npmコマンドを受け付けてもらうため
npm i @chakra-ui/react@2 @emotion/react @emotion/styled framer-motion
// インストールが終了したら，npm run dev で再度localhostを起動

今回は，~~https://chakra-templates.vercel.app/page-sections/hero~~ のテンプレートを使用してみたいと思います．このページにアクセスし，Codeからソースをコピーします．
そして，先ほどのpage.tsxに貼り付けてください．

また，Chakra UIを適用するためにlayout.tsxも編集しておく必要があります．layout.tsxの中身を以下のように書き換えてください．

import type { Metadata } from "next";
import { Noto_Sans_JP } from "next/font/google";
import "./globals.css";
import { ChakraProvider } from '@chakra-ui/react'

const notoSansJP400 = Noto_Sans_JP({
  weight: '400',
  display: 'swap',
  preload: false,
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body
        className={notoSansJP400.className}
      >
        <ChakraProvider>
          {children}
        </ChakraProvider>
      </body>
    </html>
  );
}

サイドバーの実装

　Webサイトの構成が一目で分かるようにサイドバー（メニューバー）を実装します．
ナビゲーションバーのテンプレートも用意されていますので，好みに応じて適宜使い分けてください．

　今回は，Navigation/Sidebar – Chakra Templatesを使ってみます．新しく「sidebar.tsx」というファイルを作成し，テンプレートをコピー＆ペーストします．
この時，react-icons関連でImportエラーになるかと思いますので，react-iconsをnpm install するかアイコン部分を削除してください．

react-icons をインストールする場合は，以下のコマンドを実行してください．

npm install react-icons --save

sidebar.tsxを編集し，メニューの名称を適宜変更します．
再び，page.tsxに戻り，サイドバーコンポーネントのインポートを行います．

import Sidebar from './sidebar';

export default function CallToActionWithAnnotation() {
  return (
    <>
    <Sidebar />

　タグを編集した結果が以下の通りです．一気にそれらしいサイトになりました．
ポートフォリオサイトの基本的な構成は，トップ・経歴・作品・スキル・資格の５つになるかと思います．構成は適宜増減しながら，ご自身に合ったサイトを構築してください．

Tips

　Next.jsを使った基本的なWebサイトの構築手順としては以上になりますが，せっかくなので，更なる装飾やデプロイについても解説しておきます．

AOS（アニメーションライブラリ）

　AOS – Animate on scroll library というコンポーネントにアニメーションを簡単に実装するライブラリがあります．ライブラリをインストールし，たった一行のdivタグを追加するだけで，簡単にフェードアップなどのアニメーションを実装できるので，初心者の方でも挑戦しやすいです．

　サイトに動きを付けてみたい方は，ぜひ挑戦されてみてはいかがでしょうか？

vivus（テキストアニメーションライブラリ）

　vivus.js – svg animation は，SVG形式のテキストにアニメーションを施すライブラリになります．
専用ソフトを使って専用のSVGファイルを準備する必要はありますが，コードを書くことなく（Vivus Instant – inline SVG animation with CSS を使う場合）簡単にテキストアニメーションを実装できます．

以下の記事にて方法を詳しく解説しておりますので，参考にしていただければ幸いです．