概要

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

簡単な自己紹介

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

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

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

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

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

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

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

VercelとNext.js

ここで公開するまでの課題がある。

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

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

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

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

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

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

ローカルで開発

まずはローカルで開発をします。ここで、OSはWindows11で

>npm --version
6.14.15
>node -v
v20.0.0

のバージョンで開発しました。

任意のフォルダ（私はportfolioフォルダで作成しました）で

package.json

{}

を作成し

npm install next@latest react@latest react-dom@latest typescript@latest @types/react @types/node

を実行し、必要なライブラリをインストールします。また

mkdir app

でルートフォルダを作成します。このappフォルダに

layput.tsx

import React from "react"

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

page.tsx

import React from "react"

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

を作成し配置します。実行できるようにpackage.jsonに

package.json

{
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
      }
}

を追加し、

npm run dev

で開発用簡易サーバーを起動します。http://localhost:3000 にアクセスすると

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

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

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>
}