Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.js・microCMSで ポートフォリオサイトを作りかえて学んだこと
Search
Azusa Okamoto
March 24, 2022
Programming
0
1.9k
Next.js・microCMSで ポートフォリオサイトを作りかえて学んだこと
2022年3月24日
ジャムジャム!!Jamstack_6【初心者歓迎LT会】登壇資料
Azusa Okamoto
March 24, 2022
Tweet
Share
More Decks by Azusa Okamoto
See All by Azusa Okamoto
Go初心者が開発やってみた!
azunyan
1
460
デブサミウーマン2023 アウトプットって何が良いの?
azunyan
0
850
TECH WOMAN KANSAIオンラインもくもく会の流れ
azunyan
0
40
個人的に楽しかった実装2022
azunyan
0
91
TestCaféでE2Eテスト!
azunyan
0
110
vanilla-extractを使ってみた!with React
azunyan
1
680
VisualStudioCodeの拡張機能を作ってみた!
azunyan
0
34
Other Decks in Programming
See All in Programming
座談会 「Strict ConcurrencyとSwift 6が開く新時代: 私たちはどう生きるか?」
shiz
4
2.9k
dotfiles について話したい #湘なんか
stefafafan
2
280
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
1
930
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
4
2.5k
ゲームボーイアドバンスでSwiftを動かそう
k_koheyi
0
510
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
940
Kotlin 2.0 and Beyond
antonarhipov
2
130
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
440
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
570
iOSDC 2024 SMBファイル共有をSwiftで実装する
kishikawakatsumi
1
110
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
340
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
Being A Developer After 40
akosma
82
580k
What's new in Ruby 2.0
geeforr
340
31k
What the flash - Photography Introduction
edds
67
11k
Web Components: a chance to create the future
zenorocha
308
41k
Happy Clients
brianwarren
96
6.6k
The Language of Interfaces
destraynor
153
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLとの向き合い方2022年版
quramy
43
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Transcript
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
ご清聴ありがとうございました!