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
2.1k
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
最近取り組んでいることについて喋ってみる
azunyan
0
1
フロントエンドエンジニアが関数型プログラミングに出会った話
azunyan
0
57
TECH WOMAN KANSAIの 取り組みと今後~2024年の振り返りと2025年へ~
azunyan
0
53
Go初心者が開発やってみた!
azunyan
1
520
デブサミウーマン2023 アウトプットって何が良いの?
azunyan
0
1k
個人的に楽しかった実装2022
azunyan
0
120
TestCaféでE2Eテスト!
azunyan
0
130
vanilla-extractを使ってみた!with React
azunyan
1
790
VisualStudioCodeの拡張機能を作ってみた!
azunyan
0
79
Other Decks in Programming
See All in Programming
ニーリーQAのこれまでとこれから
nealle
2
160
M5UnitUnified 最新動向 2025/05
gob
0
120
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.5k
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
750
RubyKaigi Dev Meeting 2025
tenderlove
1
1.3k
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
230
By the way Google Cloud Next 2025に行ってみてどうだった
ymd65536
0
110
Носок на сок
bo0om
0
1.1k
RuboCop: Modularity and AST Insights
koic
2
2.4k
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
260
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
200
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Side Projects
sachag
453
42k
Into the Great Unknown - MozCon
thekraken
38
1.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Code Reviewing Like a Champion
maltzj
523
40k
Bash Introduction
62gerente
611
210k
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
ご清聴ありがとうございました!