Newtについて調べたこと
Newt - ヘッドレスCMS
コンテンツ管理の新しいスタンダード | ヘッドレスCMS「Newt」
SDKドキュメント
チュートリアル
Tips
✅更新時のキャッシュRevalidate
💡 どの程度の即時性が求めるかによって、最適な方法は変わってくる
例えば、サイト全体のビルドが1~2分で完了するケースで、その程度のタイムラグが許容範囲なのであれば、デプロイHookを叩いてサイト自体をビルドし直した方が実装としてはシンプルで分かりやすいかもしれない。
数分のタイムラグが許容できないのであれば、Route Segment Config の const revalidate = 0 または const dynamic = 'force-dynamic' を設定して、アクセス毎に動的にページを生成するのが良い。ただ、完全即時でなければならないケース（例: ECサイトの商品在庫数の表示など）を除いて、revalidateは0以上（例: 60秒など）に設定するのが良いのではないかと思う
即時性が求められないコンテンツの更新であれば、基本的にはデプロイHookを叩いて、サイト全体をビルドし直す形を取るのが、シンプルで分かりやすい
ただし、コンテンツ数が多く、ビルド時間がどうしても長くなってしまう場合には、On-demand Revalidationの利用を検討すると良い
✅お問い合わせフォーム
NewtのForm Appを使う。フォームのエンドポイントが作成されるのでそれを利用する。
メールアドレスをinputとして入れておけば、そのメールアドレスへの自動返信メールを設定できる。
また通知を受け取るメールアドレスを指定して(複数可)、受信通知メールも設定可能。
NewtとNext.jsを利用して、問い合わせフォームを作成する
確認画面を入れたい
React Hook Form の FormProvider と useFormContextを使う。LayoutにFormProviderをおけば、その配下のページでフックを使える。確認画面だけではなく、複数ステップのあるフォームで便利。
Next.jsを利用した問い合わせフォームに確認画面を追加する
スパム対策をしたい
スパム対策 として Google reCAPTCHA v3を設定できる
reCAPTCHA
reCAPTCHA | Google for Developers
reCAPTCHA バッジを非表示にしたい
よくある質問 | reCAPTCHA | Google for Developers
✅プレビュー
Next.jsのDraft ModeとNewtのプレビュー設定を使う
Newt API Tokenを使うと下書きのコンテンツ含め、常に最新のデータにアクセス可能
モデル一覧の右上のプレビュー設定よりプレビューURLを指定できる
Next.jsのDraft Modeを利用して、プレビュー環境を作成する
✅クエリ
ユースケースに合わせて柔軟にクエリできる
- 降順にしたい場合は
-をつける -
カスタムオーダーは
_sys.customOrderを指定する - skipとlimitでページネーション、コンテンツの総数はtotal (APIレスポンスとしてskip,limit,total,itemsが返ってくる)
- 前後の記事を取得する - フィルター演算子gt,ltを使う (クエリ指定の考え方がとても参考になった)
公開日の降順で並べらている時、現在のコンテンツの次の(作成日が過去の)コンテンツを取得したいとする。この時、現在のコンテンツの作成日より小さいコンテンツを(作成日が)降順に並び替えたものの一番最初の記事がそれにあたる。
https://www.newt.so/docs/tutorials/understanding-query-parameters#3. クエリに関するよくある質問（ユースケース別）
Discussion