Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

今日お話しすること

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

1. 作ったもの 2. Next.jsとは？ 4. 感想 5. 参考資料 3. 学んだこと
 　 ①どうやってデータを取ってくる？

 　 ②環境変数の書き方が2種類!?

 　 ③Google Fontsを適用したい！


Slide 12

Slide 12 text

1. 作ったもの 2. Next.jsとは？ ②環境変数の書き方が2種類!?

 　 ③Google Fontsを適用したい！
 4. 感想 5. 参考資料 3. 学んだこと
 　 ①どうやってデータを取ってくる？



Slide 13

Slide 13 text

getStaticProps関数を利用！

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

1. 作ったもの 2. Next.jsとは？ ①どうやってデータを取ってくる？

 　 ③Google Fontsを適用したい！ 4. 感想 5. 参考資料 3. 学んだこと
 　 ②環境変数の書き方が2種類!?



Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

1. 作ったもの 2. Next.jsとは？ ①どうやってデータを取ってくる？

 ②環境変数の書き方が2種類!?

 　 4. 感想 5. 参考資料 3. 学んだこと
 　 ③Google Fontsを適用したい！


Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

) } 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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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