Closed14
AWS AmplifyでNext.js ISRを試す
昨日のAmplify Boost up中にTwitterで流れてきたので、早速
とりあえず、新規リポジトリの作成してAmplify ConsoleからGithubと接続。
npx create-next-app --typescript
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>
)
}
Build設定ページの「Build image settings」を見るとNext.js versionが10だったので11に変更した。
Next.js自体のビルドは問題ないけど、Amplify内でよしなにやってくれているところでこけた。
Error: Component "@sls-next/-component@undefined" was not found on NPM nor could it be resolved locally.
Updating the Next.js version for an existing app
ドキュメントにちゃんと書いてあった。
指定するバージョンは
- 9
- 10
- latest
のいずれかとのこと。
というわけで、バージョンをlatest
に変更
会社プロダクトだとlatestにはしづらいかなぁ。
直したらビルド、デプロイはOK。
SSG結果
SSR結果
ISR結果
503エラーが発生
Webpack4でのビルドに変更したけど、解決せず。
ということはCloudfron,Lambda@Edge周りのなにかが悪いはず。
一旦、お手上げ。
API RoutesとSSRページは問題なく動いてるから、ISR関連のなにかが...
気になるのはsls-next使ってるみたいなので、下記の記事と同根かも?
私も同じでISRページにアクセスと503になりました。
(8/2 時点)私は以下の設定することで解決できました。
デフォルトのままでデプロイすると、Nextjsが10が指定されていますがもう一回Amplify作り直し、最初の1回目のデプロイからlatestを指定したら問題なくISRが動作しました。
このスクラップは2021/08/02にクローズされました