Next.jsの第一歩としてVercelにデプロイしHello Worldを表示してみた

こんにちは
ALJの江口と申します。

Next.jaは、Reactをベースとしたフルスタックフレームワーク、というところまではなんとなく知っているレベルなので、無料枠があるVercelのホスティングサーバーにデプロイして、Hello Worldを表示させてみました。

Vercel(ホスティング)

VercelはVercel社によって運営されているホスティングサービスです。
Vercel社はNext.jsの開発を行っているので、Next.jsのデプロイでを容易に行うことができます。

無料枠（Hobby Plan）は非商用の利用に限定されている以外は、開発利用には十分なリソースが提供されていると思います。プランの詳細については以下のリンク先をご確認ください。
https://vercel.com/docs/plans/hobby

無料枠の制限は毎月リセットされ、例えばエッジのリクエスト回数は月に100万リクエストなど、上限についてはかなりのアクセス数があるページでないと超えない気がします。

バックエンドにDBも利用可能で、PostgreSQLベースのDB、Redisをベースとしたキーバリューストアなどが Hoppy プランでも利用可能です。

VercelとGit連携

Vercelでは、GitHubやGitLabと連携してデプロイが可能で、リリースを容易に行うことができます。

HelloWorldを表示するまでの流れ

GitとVercelが連携可能なため、実際にソースを書いてデプロイするまでの流れは以下のようになります。

１）プロジェクトの作成
npx create-next-app <プロジェクト名>

２）app/page.jsなどのコンテンツの編集

３）ローカルでテスト（npm run dev）
http://localhost:3000

４）gitにプッシュ

５）Vercelへのデプロイ

Next.jsはフレームワークなので、フレームワークの知識が必用になりますが、今ではAIなどもあるので、学習のコストはかなり下がったと思います。

コンテンツの作成

今回は、HelloWorldを表示するだけなので、app/page.js のファイルを以下のように修正し、デプロイしました。

app/page.js

'use client'; // クライアントコンポーネントとして指定

import { useState, useEffect } from 'react';

export default function Home() {
  const [message, setMessage] = useState('Loading...');

  useEffect(() => {
    // 少し遅れて「Hello, World!」を表示する例
    const timer = setTimeout(() => {
      setMessage('Hello, World!');
    }, 1000); // 1秒後に表示

    return () => clearTimeout(timer); // クリーンアップ
  }, []);

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      fontSize: '3em',
      fontWeight: 'bold',
      color: '#333'
    }}>
      {message}
    </div>
  );
}

実行してみた結果

GitHub、Vercelどちらも無料で利用でき、認証やDB付きのNode.jsアプリが開発できるので、今後、Next.jsの学習用には非常に強力な環境だと思いました。

今回はHelloWorldを表示させるだけでしたが、今後は、ログイン認証やDBをつかった本格的なアプリも試したいと思います。

以上です。