【Heroku】Next.jsアプリケーションをdeployしてみた

はじめに

HerokuにNext.jsのアプリケーションをのっけてみる。
ただの興味本位が主な目的で、同じようなことをもう一度やりたくなったときが来た場合に備えた備忘録を少し兼ねる。

準備するもの

Herokuアカウント。無料版でOK。
heroku cli。https://devcenter.heroku.com/ja/articles/heroku-cli#other-installation-methods 参照。
Node.js、Next.jsなど。
git cli。

自分的にはVS CodeのRemote Containerでやってるので、下記のようなDockerfileに基づくコンテナ上で開発していた。

FROM ubuntu:20.04

# install Node.js
RUN apt update
RUN apt install -y curl
RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash -
RUN apt install -y nodejs

# install Next.js and related modules
RUN npm install -g next react react-dom
ENV CHOKIDAR_USEPOLLING=true

# install Heroku CLI
RUN curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

# install git
RUN apt update
RUN apt-get install -y git

手順

やることは基本全部CLIで完結する。

heroku apps:create [アプリケーション名]を実行する。実行後に帰ってきたHerokuアプリのURLとgitのURLを控えておく。
適当なディレクトリの中に入ってnpx create-next-app [Project名]を実行する
cd [プロジェクト名]/ でプロジェクトディレクトリに入る
/pages配下に適当になんかつくる。
package.jsonのscripts>startの部分をnext start -p $PORTに変更する。(-p $PORTをつける)
プロジェクトのルートディレクトリでgit init
git remote add heroku [HerokuアプリのgitURL]を実行する。gitのURLは1.の内容に基づく。控え忘れてたらHerokuのコンソール上で確認できる。
git add .
git commit -m "initial commit" コメントは適宜変えてください
git push heroku main
HerokuアプリのURLにアクセスする。画面が表示されることを確認。

つくったページ

SSGとSSRを試したかったので以下のように非常に簡単なページをつくった。
以下はSSGの例。

export default function Ssg({data}) {
    return (
        <div>
            <p>
                text: {data.text}
            </p>
            <p>
                datetime : {data.dateString}
            </p>
        </div>
    )
}

export function getStaticProps() {
    const data = {
        text: 'ssg',
        dateString: new Date().toISOString(),
    };

    return {
        props: {
            data
        },
    };
}