ポートフォリオをNext.jsで作ってVercelで公開してみた

# 概要
本投稿は、Next.jsでポートフォリオを作成しVercelで公開するまでの過程をまとめたものである。

# 簡単な自己紹介
- プログラミングの個人事業を営んでいる電気電子系大学に通う大学３年生
- 主にアプリ、サービスの開発・運営をしている
- 得意な言語はPythonです
- 絶賛就活中

# ポートフォリオ作ってみるか

ポートフォリオを作ろうと決めるまでの経緯を書いているので、作り方だけ見たい方は飛ばして頂いて大丈夫です。

現在、私はエンジニアを志望している就活中の大学生です。
普段からプログラムを触っている私なのですが、就活中にふと思いました。

「あ、そういや**ポートフォリオ**作ってない」

エンジニア志望の就活生たるもの、ポートフォリオぐらい作っておいても良いかもな～と思いついて、作ることにしました。

ポートフォリオ必要不要論争はありますが、時間がある方は作ってみてもよいのではないでしょうか。

# VercelとNext.js
ここで公開するまでの課題がある。

「「どうやって公開するか？」」

私の自宅には愛しの**Raspberry Pi**（前回の記事をご参照）がありますが、1つのページを表示するためにSSLとドメインを持ってくるのはなかなか大変（ただこれらの工程をすることでスキルを証明出来るかも？）であるため、どうすればいいかなと調べている最中に**Vercel**と出会いました。

Vercelとは、CI/CDとWebサーバーが合わさったものであり、無料でWEBサイトを公開できるサービスです。詳しくは以下のサイトを参考にしてみてください。

https://note.com/libproc/n/n10dd8760d530

Vercelで使用できるフレームワークはNext.jsをメインに他にもVue.jsやReactにも対応しているみたいです。

ぶっちゃけフロントエンドフレームワークはあまり縁がなかったため、Next.jsは初使用になりますが、久しぶりに新しい言語の感触を楽しみながら作ってみることにしました。なお、今回は１ページのみのポートフォリオを作成するために使用するため踏み込んだ内容は紹介していません。

ちなみに、**Next.js**とは私用・商用を問わず無償で利用が可能（MITライセンス）なReactベースのフルスタックWebアプリケーションフレームワークです。

# ローカルで開発
まずはローカルで開発をします。ここで、OSはWindows11で
```shell
>npm --version
6.14.15
>node -v
v20.0.0
```
のバージョンで開発しました。

任意のフォルダ（私はportfolioフォルダで作成しました）で
```json:package.json
{}
```
を作成し
```shell
npm install next@latest react@latest react-dom@latest typescript@latest @types/react @types/node
```
を実行し、必要なライブラリをインストールします。また
```shell
mkdir app
```
でルートフォルダを作成します。このappフォルダに

```tsx:layput.tsx
import React from "react"

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

```tsx:page.tsx
import React from "react"

export default function Page() {
  return <h1>Hello World</h1>
}
```

を作成し配置します。実行できるようにpackage.jsonに
```json:package.json
{
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
      }
}
```
を追加し、
```shell
npm run dev
```
で開発用簡易サーバーを起動します。http://localhost:3000 にアクセスすると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/835335/c43f1cdd-0dec-8e1d-55c2-7f613a6dcebe.png)


がブラウザに表示されると思います。ここまでくれば、後は内容を作成するだけです。

具体的にはpage.tsxのreturnを変更すれば表示される内容が変わってきます。例えば
```tsx:page.tsx
import React from "react"

export default function Page() {
  return <main>
    <p>私の得意な言語を以下に示します</p>
    <ul>
        <li>Python</li>
        <li>C++</li>
        <li>MATLAB</li>
    </ul>
  </main>
}
```
と変更すると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/835335/6cd5a911-64f6-6924-3217-b0624d68d680.png)

このように表示が変わります。

# Vercelに公開
先にGitHubへポートフォリオのソースコードをあげておきます。
GitHubにアップロードする方法はこの方を参考にしてみてください。

https://qiita.com/daichiada/items/ae69da767a176d6714f1

まず、[Vercel](https://vercel.com/)にアクセスし、GitHubアカウントを連携させアカウントを作成します。

ダッシュボードから

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/835335/b251348d-f00b-e200-befe-d5839a5220ab.png)

「Add New...」をクリックし新しいProjectを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/835335/b11e88ab-69ab-f821-195f-2e63552f18b8.png)

インポートするレポジトリを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/835335/136b2ee9-90ee-a82d-55a1-76a7d1ba1549.png)

あとはプロジェクト名を決めて「Deploy」を押すと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/835335/c0081922-f1f6-68a8-fc9f-ba7be81bfd2f.png)

デプロイが開始されます。デプロイが完了すれば、「Congratulations！」表示され、サイトが公開されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/835335/c795dd33-70fb-d69d-7049-abb02bb225a9.png)

作成したプロジェクトのダッシュボードを見ると、このように

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/835335/5237665c-2197-41c1-c88a-0e48dbdb37af.png)

表示されるため、「Visit」から公開したポートフォリオにアクセスすることが出来ます。

これでポートフォリオの完成です。

# 最後に
今回はポートフォリオの作成と公開について書かせていただきました。

Next.jsを触った感想としては、普段Pythonとかのバックエンドしかほとんど触っておらず、フロントエンドの言語はあまり触ったことがなかったのでなかなかいい機会になったのかなーと思います。

私のポートフォリオは

https://portfolio-lake-iota-82.vercel.app/

に公開しています。また、GitHubにソースコードを公開していますので良ければ参考にしてみてください。

https://github.com/Roki-0120/Portfolio

皆様の参考になれば幸いです。それでは失礼します。