[NextJS]~Checkout画面: テンプレートを作成しよう!~

こんにちは、KOUKIです。

NextJSで画面開発をしています。

今回は、テンプレートの実装を行います。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

前回は、NextJSの開発環境を構築しました。

事前準備

ファイル

Checkoutテンプレート

BootstrapのCheckoutテンプレートを使って、テンプレートを作成しましょう。

Layoutテンプレート

先ほど設定したテンプレートのHTMLに全てのページに共通して使いたい要素があるので、Layoutコンポーネントにそれを抜き出しましょう。

パラメーターに「props」を設定し、HTMLのdiv要素内で「{props.children}」を宣言しました。

このLayoutタグは、以下のように使います。

Successページのテンプレート

Checkoutが問題なく完了したらSuccessページを表示します。

少し驚いたのですが、NextJSだとルーティングを設定しなくても画面遷移ができます。

「http://localhost:5000/success」にアクセスしてみてください。

画面遷移ができました!

Errorページのテンプレート

Checkoutに問題があれば、Errorページを表示します。

「http://localhost:5000/error」にアクセスしてみましょう。

ルーティングの設定

事前設定で、index.tsxを[code].tsxに変換しました。

理由は、CheckoutのURLが以下のようになる想定だからです。

NextJSでは、URLよりこのcodeをqueryから抜き出せます。

例えば、「http://localhost:5000/Xkjd」にアクセスしてみましょう。

コンソールに、「Xkjd」が表示されましたね。そしてページには[code].tsxのファイルの中身が表示されています。

const { code } = router.query」のcodeは、[code].tsxのcodeに紐づけられるというわけですね。

次回

次回は、LinkDataの実装を行いましょう

記事まとめ

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

[code].tsx

Layout.tsx

success.tsx

error.tsx

コメントを残す