Slide 1
Slide 1 text
IT
øüóù~õýóø¸óù
Next.js
û¯~w~Ó~º
j__´þùü·÷ó ÿWÍ y
j__´þùü·÷óÿÿw u
Slide 2
Slide 2 text
~è
2
/~¯?}Ï
WÍ y
j__´þùü·÷ó /
÷ýð¿ø÷³ùýó÷ñóøöûóø /
SaaS
÷³ùýó÷ñóøB
ñüð /
úüðü
}:
õS/~o
¯w:
Û×1»üù²üð
ÿw u
j__´þùü·÷ó /
÷ýð¿ø÷³ùýó÷ñóøöûóø /
ñ÷
³²÷³ùýó÷ñóøA2
ñüð /
úüðü
}:
õS/ÿ~o
¯w:
ßw»f
Slide 3
Slide 3 text
ÎÞ~²¸·óð
_µüó¹{ttv
û¯Ìo
Next.js
øÛvu
û¯÷ý»¹
Slide 4
Slide 4 text
_µüó¹~Îí
15
~ïN{oº1IT
øüóùwBtoB
~IT
ýÕþü±ö³ó°÷ü¿~þ¶ÿ¶²Ä
}~ß1öz»BtoB
»üû¹þü±ö³ó°~ºÜ²ë~y»yIT
½úõü·÷ó
Ïm²]wv}~w2
Ïmã/÷mû÷~UN²ß}Ww}»_~ß}²{wv1ÿ¯m}{
²²ûwvw~y2
Slide 5
Slide 5 text
IT
øüóùx
_|Û÷y»IT
øüóù1Om~IT
ýÕ'µüó¹^/²
o÷y»ÿÕg/~}÷ùóøõ¹üðwy2
ÎßzýÕåy
260
~ÞïP~»ö´úü12,000
ïP~ýÕåy²
ó
qýÏýËn
^/}{ßzåyßÖ²ÿó¹øó÷wßÿ
^¯ÿ{¸»þϵüó¹
IT
W'DX
ë²~ºÜ{ÿwvgùzýÕ²O
ùw
}Ï
Slide 6
Slide 6 text
Next.js
x~û¯Ìoÿz|ßs~{
òÀózâÛwõýóø¸óù²wõw1s¼¹~ºÜ²/{ë~y»ß|rº~w
âÛö¬õ
Angular
1Backbone
1jQuery
zy~
÷tâÛ¹¿ó¿|~þ²OOu
{vt~w
~û÷~_Ü
÷tâÛ²[1öü¶üûüº{ß
x»~|ö÷{zsvt~w
µ´øÕî~OO
ñõ¹üþó¹1UIUX
zyy_öz
Õî|êWwvt~w
ão~ö÷u
÷tâÛ¹¿ó¿|ão^|w~ß?
²OOu{vt~w
Slide 7
Slide 7 text
Next.js
^/_~õýóø¸óùër
Next.js
²^/y»ï_~IT
øüóù~öü¶ü¯1ïO~âÛ¹¿ó¿wëûu¼vt~w2
Laravel
~Blade
µüðüµ´ùöó÷üüø¸ó¸óxwvowvt~w
|1õýóø¸óù~÷ßg{vÖ|rº~w2
JavaScript
³üù~ßÛg´Ý{og{ºÜ|rº~w2
jQuery
DOM
í_²o?~²÷ýüñww|1Ý{o|÷w1³üù
~ÿ¯g{²ÿ|ûvt~w
Backbone.js
¹þüøõ¹ó~»üøýzy/øw¿¼vt~w|1}
sq÷v|þwvzº1}ï{f|{{svt~w2
Slide 8
Slide 8 text
Next.js
^/ß~õýóø¸óùër (
öü¶ü¯)
80%
Next.js
û¯ßÎ
Pages Router
²owërwÛoo
20%
ü¼·üôÛ
ÿöû¯{¸ºë[wvt»ç·¹öðÿ~ÕßÎÎÛ
Next.js (Pages Router)
ñ´óõüüðÿü¿xwvãow1
SSR/SSG/CSR
{¸»gùW²ßÿ
App Router
^/f{(2024
~3
o)
Oúßg|r
s
Storybook + Vitest
³óýüýóø~~û÷Wx÷¶´ó·¹öð
~}/W1õýóø¸óùö¹ø²ë²2Îß÷
¶´úüxStorybook
²³~wvt}t
OpenAPI
RESTful API
~ßù²{þWy»sxw1õýóø
¸óùxðó¿¸óù~³~|¸º¹ðüº{z
º1~û÷|UNw~w2
Slide 9
Slide 9 text
z|Next.js
²ø³p~{
üóðúó°?ý~[ùg
SSR
1SSG
1CSR
1ISR
zy1úü¸~{g{ßxgùzüóðúó°?ý²øþw}»÷ßg|1ù5z³óö
óôþ{ÿßÿýww2
ão^|w~{Og
Next.js
'React
^|w~/|¿1õwt~
~sß´ç[óðü~¹½û²ó÷|¹üº{²°xví
w~w2
Ußw¸³·¹ö
Îßzù´öùú1~z³ÿõûö³1}wvVercel
{¸»?zµýüø1~~û÷gxÛÛg²/}U
Nu{»xúïw~w2
Slide 10
Slide 10 text
z|Next.js
²ø³p~{
üóðúó°?ý~[ùg
SSR
1SSG
1CSR
1ISR
zy1úü¸~{g{ßxgùzüóðúó°?ý²øþw}»÷ßg|1ù5z³óö
óôþ{ÿßÿýww2
ão^|w~{Og
Next.js
'React
^|w~/|¿1õwt~
~sß´ç[óðü~¹½û²ó÷|¹üº{²°xví
w~w2
Ußw¸³·¹ö
Îßzù´öùú1~z³ÿõûö³1}wvVercel
{¸»?zµýüø1~~û÷gxÛÛg²/}U
Nu{»xúïw~w2
Slide 11
Slide 11 text
Next.js
~üóðúó°?ý~[ùg
²÷úÁü·÷ó~þ{ßxvgùzüóÀúóÀ²øþw}~wÿÿß{yv~?ý²otvt~y
SSR (Server-Side
Rendering)
ú²û¿´ð~÷ü¿è´SEO
ÿ
|ßzúü¸{gù(
{x³y~
úü¸SSR)
2
SSG (Static Site
Generation)
³óöóô|»{öõu¼ztß
özúü¸{(
Yö»þztßö)
CSR (Client-Side
Rendering)
´ó¿ù¿ö³özí_(
»üøý
´úü¸Õ~}ý)
(App Router
x1PPR(Partial Pre-Rendering)
´ Streaming SSR
zy²x»~w1û¯w¹svt}twy2
)
Slide 12
Slide 12 text
z|Next.js
²ø³p~{
üóðúó°?ý~[ùg
SSR
1SSG
1CSR
1ISR
zy1úü¸~{g{ßxgùzüóðúó°?ý²øþw}»÷ßg|1ù5z³óö
óôþ{ÿßÿýww2
ão^|w~{Og
Next.js
'React
^|w~/|¿1õwt~
~sß´ç[ñóðü~¹½û²ó÷|¹ðüº{²°xví
w~w2
Ußw¸³·¹ö
Îßzù´öùú1~z³ÿõûö³1}wvVercel
{¸»?zµýüø1~~û÷gxÛÛg²/}U
Nu{»xúïw~w2
Slide 13
Slide 13 text
ão^|w~{Og
<
State of JS 2024(https://2024.stateofjs.com/ja-JP/libraries/meta-
frameworks/)
0%
30%
60%
90%
React (
õýóø¸óùõüüðÿü¿ø¯) Next.js (
ñ¿õüüðÿü¿ø¯)
React
õýóø¸óùõüüðÿü¿ø¯w}80%
~o÷²º12
OïO²/}_}öwv1
Owy2Next.js
ñ¿õü
üðÿü¿ø¯w}66%
~o÷²³w1s~»ö´úw1
O²sßwvt~y2
}Þ:
ß{ão{²tz|svt~yÿ
Slide 14
Slide 14 text
Next.js
x~û¯¿´ðù´ó
Next.js
x~û¯1oÝz}xÿöz÷ý»¹²}vo|Ww~w2
2023
~4
o
Next.js
x~û¯}²Û
2024
~6
o
÷ý¸·¿øxwvo|ö{Û×
2025
~2
o
úü¸~Next.js
x~û¯|ßÎ
2025
~9
o
ÿ2ýÿöz}Õx~]x
Slide 15
Slide 15 text
÷ý¸·¿øqNr<~~w{{¯ssx
úúü¹fu~}
__óóÀðóúúü¹²óÛwvt~w|1ú¹¿²owvVrúúü¹²øþ2µüó¹\of²g/W
y»fu²v~w
âÛø¯ï_~·ÏTbx~
~ñüð~öûóøÿ²ÿ}¿1Ïmø´þüÁö³óÀø¯ÿSEO
ñõ¹üþó¹|ºwWmy»{²û¯~
oÿ²®nw1âÛø¯ï_~W?²ß»_v²ëûw~w2
sswÝs~1âÛöñúóøqwz1ó¸ý¹özñúóø²nú{ysxww2
ÿßo~qºÜwr»<ñõ¹üþó¹~UN=²{{¿w÷|rº~y{
SRE
x³~w1´óõù¯~¿öw
õýóø¸óùxðó¿¸óù²wúý¸øúwûvy»±1´óõùt~¯~¿öw²SRE
ñüð{²þÏwv
fu²v~wÿSRE
ñüð~o5{o_{wy
Slide 16
Slide 16 text
PJ
Wß~ß~û¯÷ý»¹
1 ÿíúü¸~tûw
þüÁö³óÀñüðxW?wvû¯ÿíúü¸~{YOÞq²ßý2¸º³óðü¸÷ó|r»úü¸|{Y
2 ¹Á¸õüûûw
úü¸ïwtt~w{¿¹{»{~¿²º²vv1Ïmøx~fqoÿNext.js
~}|z{s±1ss|ów{sw
y
3 õýóø'ðó¿¸óùÿ¯Û
ç[~Nginx
ôÛ²ow1Next.js
úü¸xLaravel
úü¸²ùW{oºVq»ûüö³ó°¯²ßÍ
4 ß{úü¸²ç_
tx{oºVqvßÍ
~y»úü¸~÷ü¿²Open API
wßWwv1Laravel
wAPI
ßÍ1Next.JS
wõýóø_r~m¼
5 üóõüßÎß1stg
ôÛwö¹øwvoúúü¹
÷÷ý´{Next.JS
~Swr»Vercel
²ão
Slide 17
Slide 17 text
æöwý´óø
1
ú÷ü´¹ÿ¿¹¿~/u¿²º~÷wu
ðó¿¸óù~×z¿¸ú÷v²úõ±¿¿wz|¹API
_rwº1Next.js
³üù~{ëzý{c¼»~f²w1¹
Á¸õüûûww_rw__~¸ºÕþ|~ow~w2
ýþÏmø´Nÿ¹xþÏwrsv²±vt÷
2
Áüð~ÿ³¹ø
{òÀóõýóø¸óù~|_±v~ñóðüw¯s±1âÛÿß{ÎóïN{f|{{º~w2
±{/ÞÁüðÕw÷¿qo~|zy²¯qºwz|¹²±~w2
3
Next.js
þo~ý~sto
ÏxLink
¿À´Image
¿Àzy1/¿~û÷´ñõ¹üþó¹²Nrv¼»ý{¸sv1{qÝzú¿¸¹ø²ß´wv
w~sº1Vercel
~Y}÷ùó~NÖ{rÔw}v{zs~w1st|÷wtxx~w2ûw_zenn
w²wv
»~wo¯¿vOut2
Slide 18
Slide 18 text
û¯wßÝz÷¿
API
ú¿¸¹øu~ßò{v¬÷ö¹ø~Ýg
API
ú¿¸¹ø{w¿´ÿóÀwú¿¸¹øu_wz|¹ßx»~w1¬÷ö¹ø~Ýg²Ûw~w2
2
ÿüóÀúóÀxSEO
~·ÏÿSSR+CSR
_HTML
}xCSR
wß{¹¯¿}~{ww1Ýz}_è{»y}xs~w2
÷÷ý´ôÛ~øÛÿ_f
g_AWS Amplify
²voUwxv~w|1UserAgent
~×ß{_Ü|rº1Vercel
x~û¯²ßýw~w
Slide 19
Slide 19 text
û¯wßÝz÷¿
API
ú¿¸¹øu~ßò{v¬÷ö¹ø~Ýg
API
ú¿¸¹ø{w¿´ÿóÀwú¿¸¹øu_wz|¹ßx»~w1¬÷ö¹ø~Ýg²Ûw~w2
2
ÿüóÀúóÀxSEO
~·ÏÿSSR+CSR
_HTML
}xCSR
wß{¹¯¿}~{ww1Ýz}_è{»y}xs~w2
÷÷ý´ôÛ~øÛÿ_f
g_AWS Amplify
²voUwxv~w|1UserAgent
~×ß{_Ü|rº1Vercel
x~û¯²ßýw~w
Slide 20
Slide 20 text
÷÷ý´ôÛ~øÛÿAmplify
{¹Vercel
x
_}ÿAWS Amplify
ç[~AWS
´óõùx~«Üg²rº1__AWS Amplify
²÷÷ý´ôÛ~YÜxwv}wvt~w2
ºÜ~oÿUserAgent
~×ß_Ü
w{w1UserAgent
åy~×ß{_Ü|r»sx|vnw1¿ÿw}ÿAmplify
þo~Ow\wrssx|vn
w~w2
g~ÛÿVercel
x~û¯
Next.js
~~Swr»Vercel
1s~UserAgent
~_ܲë~w}»sx|úu¼1yv~üóðúó°?ý{ÿ
ßwvt~w2³¹ø~¿u÷ùww|1z³x{Îÿ|ߺ~w1}~~~Vercel
²ãow~w
øÛ~1üóðúó°?ýx~«Ügx³¹øñõ¹üþó¹zy²owv1¯VÔ{rsôüû²øs~w·v
Slide 21
Slide 21 text
û¯~rÿÿ_|Y¿s~{
Slide 22
Slide 22 text
ñõ¹üþó¹~/_UN
Next.js
x~û¯{¸º1úü¸èþ|/_{UN
w~w2{{_è~¿WÝ×w1öü¶ü
¸ºÿù{³óöóô{²¿»¹w}»¸v{zº
~w2
Core Web Vitals
~¹³²²/_{}Õw1µ´ø~u
yg|UNw~w2
ûwtrÿzenn
{²wvrº~y2
Zenn
/kü¼·ü²÷ú²Next.&
om~ow1Next.JS
²otv
~1xtv{ç[~ü¼·üz_&
Slide 23
Slide 23 text
ão?~W
Next.js
x~û¯{¸º1_~âÛ¹¿ó¿òÀóWu¼~w2
s¼{¸º1òðózâÛ{·?²ct¸ó¸û²{¹~ßß|ßòw1_/{kõxwv~ão²y»sx|w}~w
2âÛx~÷Ï|1/wsß{ö}y»sx²ßwvt~y2
ß{}¼w/wõ~´ó¿óõü|_~note
Ï{²r»~w1¸q¼|rvutÿ
note
ÿþüø
î÷wv{¹3
öo}sù~´þùü·÷ów~zßÏÿj__´þù&
x±~wvÿ 3
o{´þùü·÷ó{/w²üð/}}¼»¸ó¸û²~
Chisato
wy
}½}½3
öo|}xvxwvt»~w1ù~s¼~wx´þùü&
Slide 24
Slide 24 text
ÿö¯wvt»ºÜ
Atomic Design
~¿öwxgùW
ç[~Atomic Design
|×Ww1Storybook
|rsv²ûv|÷wz
svt»~w1·ó÷ûwûvw´yt³óýüýóø¯{w}zt{
xxvt~y2
ÿ÷¿|¿ºzt~w1r»oo¯zûw~w·v
App Router
x~û¯
öz»ñõ¹üþó¹UNx1^gözPages Router
µýüøÎ~ÿ
ýg²owv1û¯u{tzxxvt~yÿxtx1xv²ö?
~t»_mxzº}vwy
~ü¼·üzûv¯~wõ
ûv¯~/øAngular 1.2
zy~÷tâÛx1Fat Controller
|î¼v
t»~w~x±vwõwtxxvt~y2
Slide 25
Slide 25 text
Îß~]ÿkz»âÛ¿õx
Next.js
~ýÿö}Õ
Atomic Design
~}Õ²wßo
Ûözðü¸÷ó²ó÷
Lint
xPrettier
²Biome
{Yöy»zy1õâÛ~}ö^/
ñó±ü¸ûv~gùW
ðó¿¸óùwõ÷ý¸·¿ø
Next.js
ÿTypeScript
x~þg²ow1Laravel
{¹Go
x~û¯~oÿY³xvbatch
q´sv~y|1÷vþ|{zºzº~w
ÎAI
²1¸ºßoö{zsvt»~wõûowz|¹¹ôüùcsv²±¹¼vt~y2
ÿClaude Code
xCodex CLI
sv~y
~1õýóø¸óùwõ~rß_|k~÷ý¸·¿ø{²}ÿ²Nxvt~y
âÛøÛ´ßÍqwz1ñüðy_wït²oûy÷ý»¹²/W{wvt~y2w²c¼o|rzûww~w·vÿ
Slide 26
Slide 26 text
note
xZenn
²´sv~y~w1
õ¹ýüzØtw~yÿ
Zenn
j__´þùü·÷ó Tech Blog
m}g/~ý/UqIT
ýÕµüó¹