選ばれたのは Next.jsでした Isomura Kenjiro 2020.12.18 UIT meetup vol.11 「フロントエンド紅⽩LT合戦」 〜 Next.jsによるServer Side OGP ⽣成 〜

ࣗݾ঺հ

ۀ຿ ࣾ಺޻਺؅ཧγεςϜ ϑϩϯτΤϯυ։ൃ +4ϓϩδΣΫτͷ54Խ &&ςετ؀ڥͷߏங 会社：LINE Growth Technology 株式会社 所属：開発室 / UITチーム(GT) -*/&%&7&-01&3%": ϑϩϯτΤϯυ։ൃ 役職：フロントエンドエンジニア 名前：Isomura Kenjiro 好きな技術：TypeScript, React @isoken26

-*/&%&7&-01&3%":ͱ͸ • LINEが11⽉25⽇〜27⽇の3⽇間に渡って開催したオンライン技術カンファレンス • 9900+ Registered • 150+Sessions • 200+Speakers

-*/&%&7%":Ͱ͸ηογϣϯຖʹ0(1ͷੜ੒Λߦ͍ͬͯͨ

150+セッション ｘ (ja + en) 300+パーターン対応 -*/&%&7%":Ͱ͸ηογϣϯຖʹ0(1ͷੜ੒Λߦ͍ͬͯͨ

0(1Λಈతʹੜ੒͍ͯͨ͠ なぜこれほど多くのパターンに対応できたか

0(1ͷಈతੜ੒ͱ͸ 0(1ͷಈతੜ੒ • OGPの画像とかをページ毎に切り替えたい • OGP画像の動的⾃動⽣成

0(1ͷಈతੜ੒ͱ͸ 0(1ͷಈతੜ੒ • OGPの画像とかをページ毎に切り替える https://example.com/items/1 https:// example.com/items/2 https ://example.com https://example.com EXAMPLE SHOP EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE SHOP EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE

Ͳ͏΍ͬͯ΍Δͷ͔ 0(1ͷಈతੜ੒

/FYUKTͷ443 ʢ͋Εɺ44(͸ɻɻɻʣ 0(1ͷಈతੜ੒

https://expamle.com/item/3 https://expamle.com/item/2 https://expamle.com/item/1 0(1ͷදࣔͷ࢓૊Έ͓͞Β͍ • サーバ側へリクエストが⾏った時にOGP⽤のタグを含む htmlが⽣成されている状態 0(1ͷಈతੜ੒ OGP対応しているアプリ ②URLクロール ③response https://expamle.com/item/3 https ://example.com EXAMPLE SHOP EXAMPLE EXAMPLE EXAMPLE EXAMPLE https://expamle.com/item/2 https ://example.com EXAMPLE SHOP EXAMPLE EXAMPLE EXAMPLE EXAMPLE https://expamle.com/item/1 https ://example.com EXAMPLE SHOP EXAMPLE EXAMPLE EXAMPLE EXAMPLE ①URLが⼊⼒される ④OGPカードの⽣成

ಈత0(1ͷੜ੒ /FYUKTʹ͓͚Δ44( 443ͷ࣮૷

/FYUKTʹ͓͚Δ44( 443 ಈత0(1ͷੜ੒ • Next.jsではFile-System Routing • pagesディクトリ配下の構成(file名など)に基づいてroutingが構成 前提知識として • 各ページのdefault exportされているReactコンポネントがページコンポネントとして renderingされる // pages/users/index.tsx const Users = () => { return ( ) } export default Users

44(͢Δʹ͸ ಈత0(1ͷੜ੒ そのままでいい

44(͢Δʹ͸ ಈత0(1ͷੜ੒ Next.jsはデフォルトでpages配下のページコンポネントをSSGによってpre-renderingします。

// pages/users/index.tsx export default function Users({ users }) { return (

{users.map((user) => (
• {user.name}
))}

) } // SSG with Data export const getStaticProps = async () => { const res = await fetch('/users’) const users = await res.json() return { props: { users, }, } } σʔλ෇͖ͷ44( ಈత0(1ͷੜ੒ • getStaticPropsという⾮同期関数をexportすること でデータをpropsに紐づけてbuildすることも • getStaticPropsはサーバーサイドでのみ実⾏され • getStaticPropsはブラウザからアクセスできない • getStaticPropsはビルド時のみ実⾏される

44(ͷܽ఺ ಈత0(1ͷੜ੒ • ビルド時のみにデータの取得を⾏うため、頻繁に変化のある データには向かない SSRという選択肢 LINE DEV DAYもデータが頻繁に更新される可能性があったため SSGは要件に合わなかった。。

443͢Δʹ͸ ಈత0(1ͷੜ੒ getStaticProps getServerSideProps リクエストごとに実⾏される ビルド時に実⾏される // pages/users/index.tsx export default function Users({ users }) { return (

{users.map((user) => (
• {user.name}
))}

) } // export const getStaticProps = async () => { export const getServerSideProps = async () => { const res = await fetch('/users’) const users = await res.json() return { props: { users, }, } }

0QUJPOBMͳ࿩ ಈత0(1ͷੜ੒ getStaticPropsとgetServerSidePropsが宣⾔的に定義できる Next.jsではpage毎にCode Splittingが⾏われている 要件やシチュエーションによってSSG, SSRを完全に使い分ける事ができる Hybridなアプリケーションの構築が可能

443Ͱ0(1Λಈతʹੜ੒͢Δ ಈత0(1ͷੜ੒

443Ͱ0(1Λಈతʹੜ੒͢Δ ಈత0(1ͷੜ੒ セッション詳細画⾯のrouting pages/sessions/[id].tsx /pages/sessions/0000 /pages/sessions/2222 /pages/sessions/1111 [id].tsx 以下のようなroutingが可能になる (Dynamic Routes)

443Ͱ0(1Λಈతʹੜ੒͢Δ ಈత0(1ͷੜ੒ getServerSidePropsの実装 export async const getServerSideProps = (context) => { // id === "0000" const { id } = context.query const res = await fetch(`/sessions/${id}`) const session = await res.json() return { props: { session }} } ①context.queryから[id]にあたるidを取得 ②idを元にセッションの詳細情報を取得 ②取得したセッション詳細情報をページコンポネントにpropsとして渡す

443Ͱ0(1Λಈతʹੜ੒͢Δ ಈత0(1ͷੜ੒ ページコンポネントSessionの実装 ①渡されたsession詳細データからogpImageUrlを`og:imageにセットする` ②渡されたsession詳細データからogpUrlを`og:url`にセットする ②データが紐付いたらDOMをrenderingする // pages/sessions/[id].tsx cosnt Session = ({ session }) => ( 〜 〜 ) ApplicationLayoutというラッパーコ ンポネントを省略している

443Ͱ0(1Λಈతʹੜ੒͢Δ ಈత0(1ͷੜ੒ // pages/sessions/[id].tsx cosnt Session = ({ session }) => ( 〜 〜 ) export async const getServerSideProps = (context) => { // id === "0000" const { id } = context.query const res = await fetch(`/sessions/${id}`) const session = await res.json() return { props: { session }} } export default Session; 全体

·ͱΊ Next.jsではSSGやSSRをとても簡単に実装できるためOGPの動 的⽣成も簡単にできる なんでもかんでもSSGすればいいのではなくてシチュエーショ ン、要件によってSSR,SSGを使い分けると良さそう ISR(Incremental Static Regeneration)など今回は触れなかった Next.jsの魅⼒的な機能がまだまだあるので今までNext.jsやっ たことない⼈の興味を持つきっかけになれたら嬉しいです。

THANK YOU