Amplify + Next.js でSSRするチュートリアルやってみた

公開:2020/10/04
更新:2020/10/05
1 min読了の目安(約1400字TECH技術記事

概要

[アップデート]AmplifyがNext.jsとNuxt.jsを利用したSSR(Server Side Rendering)に対応しました! で紹介されていたチュートリアルをやってみた

TL;DR

  • 若干ハマったがデプロイして動かすことはできる
  • mockの設定が悪いのかローカルで起動しても動かない

各章の雑感

Prerequisites

特にハマりどころはない

Connect API and database to the app

ハマり1

amplify push したところで以下のエラー

@auth directive with 'userPools' provider found, but the project has no Cognito User Pools authentication provider configured.

https://github.com/aws-amplify/docs/issues/2425
このissueから辿って
https://github.com/aws-amplify/amplify-cli/issues/4736
これにたどり着く。

原因は

? Configure additional auth types?
# Yes
? Choose the additional authorization types you want to configure for the API:
# Amazon Cognito User Pool

Amazon Cognito User Pool を選ぶところでスペースキーを押さずにエンターを押していた。(選択方法は画面に表示されてれるからちゃんと読もうね)

ハマり2

Testing SSR の部分で nmp run dev して post した時に以下のエラー

Unhandled Runtime Error
Error: Cannot return null for non-nullable field Post._version.

mock が AppSync 部分の処理をやってくれないのが原因?
とりあえずmockで起動するの諦めるか...

Deploy and host app

特にハマりどころはない