Next.js・microCMSでポートフォリオサイトを作りかえて学んだこと

Next.js・microCMSでポートフォリオサイトを作りかえて学んだことジャムジャム！！Jamstack_6【初心者歓迎LT会】岡本梓沙 Next.js 初心者が！ @azunyan_eng

自己紹介

自己紹介 2020年10月 2021年10月現在 V 業務システム保守(React・TypeScript& V WEBアプリケーション開発(Vue.js・TypeScript& V ECサイトの開発・保守
etc... 2年目！

今日お話しすること

今日お話しすること 1. 作ったもの 2. Next.jsとは？ 3. 学んだこと 4. 感想 5.
参考資料

1. 作ったもの 2. Next.jsとは？ 3. 学んだこと 4. 感想 5. 参考資料

作ったもの、ちょっとお見せします。

1. 作ったもの 3. 学んだこと 4. 感想 5. 参考資料 2. Next.jsとは？

Next.jsとは？ c ReactベースのフレームワークA c HTMLの生成方法が3種類A c HTMLの生成方法はページごとに選択できるA c pagesディレクトリ内にファイルを配置すると、そのファイル名でアクセスできる！

リクエスト受取時サーバ側 SSR (Server Side Rendering) サーバ側ビルド時 SSG (Static
Site Generation) クライアント側リクエスト受取時 CSR  (Client Side Rendering) いつ？どこで？

1. 作ったもの 2. Next.jsとは？ 4. 感想 5. 参考資料 3. 学んだこと 
　 ①どうやってデータを取ってくる？   　 ②環境変数の書き方が2種類!?   　 ③Google Fontsを適用したい！ 

1. 作ったもの 2. Next.jsとは？ ②環境変数の書き方が2種類!?   　 ③Google Fontsを適用したい！  4. 感想
5. 参考資料 3. 学んだこと  　 ①どうやってデータを取ってくる？  

getStaticProps関数を利用！   SSGにおいて、外部からデータを取ってくる時に利用する関数。 ①どうやってデータを取ってくる？

export await return = () => { = . ({
}); { : { } } } const const getStaticProps get async data client ENDPOINT_ARTICLES data endpoint: process env props articles: contents . . .

1. 作ったもの 2. Next.jsとは？ ①どうやってデータを取ってくる？   　 ③Google Fontsを適用したい！ 4. 感想
5. 参考資料 3. 学んだこと  　 ②環境変数の書き方が2種類!?  

②環境変数の書き方が2種類!? 環境変数の書き方を間違えていた。環境変数の書き方が2種類あった！

②環境変数の書き方が2種類!? REACT_APP_API_KEY REACT_APP_URL ・サーバ側で利用・クライアント側で利用 API_KEY NEXT_PUBLIC_URL

1. 作ったもの 2. Next.jsとは？ ①どうやってデータを取ってくる？   ②環境変数の書き方が2種類!?   　 4. 感想 5.
参考資料 3. 学んだこと  　 ③Google Fontsを適用したい！ 

③Google Fontsを適用したい！ index.htmlもないし、いつものheadタグってどこ...？？どこに<link>タグを書いたら良いのかわからん...！！

③Google Fontsを適用したい！ Custom `Document`を利用t f <html>タグや<body>タグに変更を加えることができるr f クライアント側で動く処理を書くことはできない。

) } Document; export default < > < > <
= = /> < = = /> < = = /> </ > < > < /> < /> </ > </ > Html Head link link link Head body Main NextScript body Html rel href rel href crossOrigin href rel "preconnect" "https:/ /fonts.googleapis.com" "preconnect" "https:/ /fonts.gstatic.com" "https:/ /fonts.googleapis.com/css2?family=Forum&family=Noto+Serif+JP:wght@200&display=swap" "stylesheet" import from const return { Html, Head, Main, NextScript } Document = () => { ( 'next/document' pages/_document.js

1. 作ったもの 2. Next.jsとは？ 3. 学んだこと 5. 参考資料 4. 感想

感想 " ページ遷移を手軽に設定できた " CSS Modulesがデフォルトで利用できる！(個人的な好み " ドキュメントやチュートリアルがわかりやすくて助かった！

1. 作ったもの 2. Next.jsとは？ 3. 学んだこと 4. 感想 5. 参考資料

参考資料 Next.js 公式ドキュメント microCMS + Next.jsでJamstackブログを作ってみよう WEB+DB PRESS vol.123 p.43~p.73

ご清聴ありがとうございました！

Next.js・microCMSでポートフォリオサイトを作りかえて学んだこと

Next.js・microCMSでポートフォリオサイトを作りかえて学んだこと

Azusa Okamoto

More Decks by Azusa Okamoto

Other Decks in Programming

Featured

Transcript