Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

虎の穴ラボ株式会社

September 09, 2022
Tweet

More Decks by 虎の穴ラボ株式会社

Other Decks in Programming

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のページが1つずつしかない単純なものなので

    以下の内容を追加して、ちょっとWebサイトっぽくします • レイアウトを追加する • ユーザー認証を追加する • 認証済みのときだけログアウトボタン表示 15
  16. Copyright (C) 2022 Toranoana Inc. All Rights Reserved. ちょっとWebサイトっぽくする チュートリアルはSSRのページとSGのページが1つずつしかない単純なものなので

    以下の内容を追加して、ちょっと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のページが1つずつしかない単純なものなので

    以下の内容を追加して、ちょっと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のページが1つずつしかない単純なものなので

    以下の内容を追加して、ちょっと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