Amplify + Next.js + TypeScript のアプリをいい感じにしたかった

2022/09/08 フロントエンドLT会 - vol.8
「Amplify + Next.js + TypeScript のアプリをいい感じにしたかった」
登壇資料です。

Transcript

1. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Amplify + Next.js + TypeScript のアプリを いい感じにしたかった 2022/09/08 フロントエンドLT会 - vol.8 #frontendlt 虎の穴ラボ　西志村友基 1
2. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 自己紹介 西志村　友基 • 所属：虎の穴ラボ株式会社 • 担当：Fantiaなど • 入社理由： ◦ BtoCサービスに関わりたい ◦ 一生に一度はオタク業界に関わりたい • 趣味：アニメ鑑賞、ゲーム、競馬 2
3. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. やりたいこと • Amplify チュートリアルをやってみよう • ちょっとWebサイトっぽくする • まとめ 3
4. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. やりたいこと • Amplify チュートリアルをやってみよう • ちょっとWebサイトっぽくする • まとめ 4
5. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. みなさん、Amplifyつかってますか 5
6. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. AWS Amplifyとは 1. ウェブアプリやモバイルアプリを素早く構築できるツール 2. GraphQL APIを自動生成し基本的なデータ操作が可能 3. AWSのベストプラクティスに沿ったサーバーレスアプリケーションが構築可能 4. 対話形式で各種設定を行うことができる 5. 数クリックでアプリを公開できる 6. Amplify Studioによる容易なコンテンツ管理 6
7. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Amplifyは公式ドキュメントが充実 Amplifyは詳しい公式ドキュメントがあるので Amplifyの勉強は基本的に公式ドキュメント読めばOK https://docs.amplify.aws/ 7
8. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 充実したドキュメントですが… ドキュメントにはTypeScriptでの実装例がありません。 TypeScriptで実装したい場合は実装者が置き換える必要があります。 TypeScriptで実装した例はとらラボのブログ(後述)にて紹介していますので ぜひ御覧ください。 8
9. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. まずはチュートリアル Amplifyのドキュメントには開発のチュートリアルがあります。 VueやReactなど様々な選択肢がありますが、 今回はNext.jsを選びました。 9
10. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. チュートリアルで学べること チュートリアルでは以下のようなことを学べます。 • GraphQL APIの実装方法 • Next.jsでSSRとSSGを実装する方法 チュートリアルを通して、 簡単なメッセージを投稿するアプリを作れます。 10
11. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. SSRとSSGについて SSR: Server Side Rendering • サーバーサイドレンダリング • ページ遷移の度にサーバー側でHTMLを生成してレスポンスを返す SSG(単にSGとも): Static Site Generation • ページを初回にビルドしたときだけHTMLを生成し、各ロード時に再利用される • 更新が入らないページに向いている 11
12. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. SSR・SSGのメリットデメリット 12 SSR メリット • ユーザーの通信環境に左右されない • 更新頻度の高いアプリにも対応可能 デメリット • サーバー側の負荷がある SSG メリット • パフォーマンスが向上 • Next.jsを開発しているVercelが推奨 デメリット • ページが更新されてもページに反映され ない • 多数ページがあるとビルドに時間がかか る 適したサービス • 動画投稿サイト • SNS • 大規模サイト 適したサービス • 更新頻度の少ないブログ • コーポレートサイト • 中規模サイト
13. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Next.js + TypeScriptで実装する ソースはブログに記載していますので参考にしてください。 （だいぶ前に書いた内容ですが、基本は同じはずです） Next.js + TypeScript + AWS Amplify でアプリケーション開発 https://toranoana-lab.hatenablog.com/entry/2021/11/08/170216 13
14. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. やりたいこと • Amplify チュートリアルをやってみよう • ちょっとWebサイトっぽくする • まとめ 14
15. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが１つずつしかない単純なものなので 以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 15
16. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが１つずつしかない単純なものなので 以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 16
17. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. レイアウト レイアウトコンポーネント：components/layout.tsx　を作成します import Footer from "./footer" import Header from "./header" import { ReactNode } from "react"; interface LayoutProps { children: ReactNode; } const Layout = ({children}: LayoutProps) =>{ return( <> <Header /> <main>{children}</main> <Footer /> </> ) } export default Layout 17
18. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. レイアウトを適用させる _app.tsxを修正します function MyApp({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> ) } export default MyApp 18
19. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが１つずつしかない単純なものなので 以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 19
20. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 認証を追加する Amplifyを使って認証機能を追加することができます 設定は以下の通り $ amplify add auth 20
21. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ログイン認証 最も簡単に認証を実装する方法は <Authenticator>で囲う方法です。 ログイン認証を入れたい箇所にタグを入れるだけです。 import { Authenticator } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; const Home: NextPage = () => { return ( <Authenticator> <...> </Authenticator> ) } 認証済みであれば この中を表示するイメージ 21
22. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. Authenticatorについて AuthenticatorはAmplify UIというライブラリの一部です。 Amplify UIはUI開発にAmplifyのシンプルさや拡張性を提供します。 https://ui.docs.amplify.aws/react/connected-components/authenticator 22
23. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが１つずつしかない単純なものなので 以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 23
24. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ログアウト import { useAuthenticator } from "@aws-amplify/ui-react"; import Link from "next/link" import { Auth } from "aws-amplify"; const Nav = () => { const { route } = useAuthenticator((context) => [context.route]); let logOutLink = <></> if (route == "authenticated"){ logOutLink = <li><a onClick={() => Auth.signOut()} href={"javascript: void(0);"} >ログアウト</a></li> } return( <nav> <ul className={styles.list}> … {logOutLink} </ul> </nav> ) } ユーザーが認証済みかかどう か判定できます 24
25. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. useAuthenticator フック Authenticator の認証状態の確認、変更、および更新に使用できます。 使用するコンポーネントを <Authenticator.Provider>で囲う必要がある点は注意です。 https://ui.docs.amplify.aws/react/connected-components/authenticator/headless#useauthenticator-hook 25 import { Authenticator } from '@aws-amplify/ui-react'; export default () => ( <Authenticator.Provider> <App /> </Authenticator.Provider> );
26. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. やりたいこと • Amplify チュートリアルをやってみよう • ちょっとWebサイトっぽくする • まとめ 26
27. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. まとめ • Amplifyにバックエンドはおまかせ ◦ 認証やデータ操作などをサポート • Next.js＋TypeScriptでアプリ開発 ◦ SSRやSSGの特性を理解して必要に応じて使い分けましょう • TypeScript… がんばって勉強しましょう。。 27
28. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 過去の発表資料 Amplifyについての過去の発表はこちらです React + Amplifyで アプリ開発 https://www.slideshare.net/toranoana-lab/react-amplify Amplify Studioを使ってみた https://www.slideshare.net/toranoana-lab/amplify-studio 28
29. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. 関連ブログ Next.js + TypeScript + AWS Amplify でアプリケーション開発 https://toranoana-lab.hatenablog.com/entry/2021/11/08/170216 新機能「AWS Amplify Studio」を試してみました https://toranoana-lab.hatenablog.com/entry/2021/12/15/150000 29