【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で完結する。

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

SSRの場合は基本的にgetStaticPropsがgetServerSidePropsになってるだけである。

なお、SSGの場合は、ビルド時に頁が生成される都合で、ページ表示上の「datetime」の表記は何回リロードしても変化しない。
SSRの場合はリロードするたびに変わる。

---