Closed14

AWS AmplifyでNext.js ISRを試す

mktbshmktbsh

とりあえず、新規リポジトリの作成してAmplify ConsoleからGithubと接続。

npx create-next-app --typescript
mktbshmktbsh

SSG

pages/index.tsx
<main className={styles.main}>
        <h1 className={styles.title}>
          genarated by <a href="#">SSG!</a>
        </h1>

       <p className={styles.description}>
          Get started by <code className={styles.code}>pages/index.js</code>
        </p>
 </main>

SSR

pages/ssr.tsx
type Props = InferGetServerSidePropsType<typeof getServerSideProps>;

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const { no } = ctx.query;
  const { id, name, image } = await fetchPokemon(no || 1);
  return {
    props: {
      id,
      name,
      image
    }
  }
}

const SSRPage: NextPage<Props> = ({ id, name, image }) => {
  // 省略
  return (
    <main className={styles.main}>
        <h1 className={styles.title}>
          genarated by <a href="#">SSR!</a>
        </h1>

        <Image src={image} width="256" height="256" alt={name} />
        <p className={styles.description}>
          No.{id}
          <br />
          {name}
        </p>
    </main>
  )
}

export default SSRPage;

ISR

pages/isr.tsx
type Props = InferGetStaticPropsType<typeof getStaticProps>;

export const getStaticProps = async () => {
  const { id, name, image } = await fetchPokemon(randomInt(1, 150));
  const updateAt = formatDate(new Date());
  const revalidate = 15;
  return {
    props: {
      id,
      name,
      image,
      updateAt,
      revalidate: revalidate,
    },
    revalidate: revalidate,
  };
};

const ISRPage: NextPage<Props> = ({ id, name, image, updateAt, revalidate }) => {
  return (
    <main className={styles.main}>
        <h1 className={styles.title}>
          genarated by <a href="#">ISR!</a>
        </h1>
        <p>revalidate: {revalidate}</p>
        <p>lastModified: {updateAt}</p>

        <Image src={image} width="256" height="256" alt={name} />

        <p className={styles.description}>
          No.{id}
          <br />
          {name}
        </p>
    </main>
  )
}
mktbshmktbsh

Build設定ページの「Build image settings」を見るとNext.js versionが10だったので11に変更した。

mktbshmktbsh

Next.js自体のビルドは問題ないけど、Amplify内でよしなにやってくれているところでこけた。

Error: Component "@sls-next/-component@undefined" was not found on NPM nor could it be resolved locally.

mktbshmktbsh

Updating the Next.js version for an existing app

ドキュメントにちゃんと書いてあった。
指定するバージョンは

  • 9
  • 10
  • latest
    のいずれかとのこと。

というわけで、バージョンをlatestに変更

会社プロダクトだとlatestにはしづらいかなぁ。

直したらビルド、デプロイはOK。

mktbshmktbsh

Webpack4でのビルドに変更したけど、解決せず。
ということはCloudfron,Lambda@Edge周りのなにかが悪いはず。

KamedonKamedon

私も同じでISRページにアクセスと503になりました。

(8/2 時点)私は以下の設定することで解決できました。

デフォルトのままでデプロイすると、Nextjsが10が指定されていますがもう一回Amplify作り直し、最初の1回目のデプロイからlatestを指定したら問題なくISRが動作しました。

mktbshmktbsh

なるほど、ありがとうございます!試してみます!

mktbshmktbsh

もう記事まで!classmethodさんの記事にはいつもお世話になっております。

next_version:latestにして作り直したところ、ISRが問題なく動作することを確認できました!
ありがとうございました。

このスクラップは2021/08/02にクローズされました