ITトレンドのフロントエンドNext.js移行までの道のり

Transcript

1. IT øüóù~õýóø¸óù Next.js û¯~w~Ó~º j__´þùü·÷ó ÿWÍ y j__´þùü·÷óÿÿw u
2. ~è…2 /~¯?}Ï WÍ y j__´þùü·÷ó / ÷ýð¿ø÷³ùýó÷ñóøöûóø / SaaS ÷³ùýó÷ñóøB ñüð / úüðü }: õS/
   ~o ¯w: Û×1»üù²üð ÿw u j__´þùü·÷ó / ÷ýð¿ø÷³ùýó÷ñóøöûóø / ñ÷ ³²÷³ùýó÷ñóøA2 ñüð / úüðü }: õS/ÿ~o ¯w: ßw»f
3. ÎÞ~²¸·óð _µüó¹{ttv û¯Ìo Next.js øÛvu û¯÷ý»¹<rÿ ö¯wvt»ºÜ Îß~]
4. _µüó¹~Îí 15 ~ïN{oº1IT øüóùwBtoB ~IT ýÕþü±ö³ó°÷ü¿~þ¶ÿ¶²Ä }~ß1öz»BtoB »üû¹þü±ö³ó°~ºÜ²ë~y»yIT ½úõü·÷ó Ïm²]Ÿwv}~w2 Ïmã/÷mû÷~UN²ß}Ww}»_~ß}²{wv1ÿ¯m}{ ²²ûwvw~y2
5. 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 }Ï
6. 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
7. 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} s€q÷v|þwvzº1}ï{f—|{{svt~w2
8. 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
9. 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
10. 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
11. 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 )
12. 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
13. ã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ÿ
14. 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
15. ÷ý¸·¿ø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
    
16. PJ Wß~ߟ~û¯÷ý»¹ 1 ÿíúü¸~tûw þüÁö³óÀñüðxW?wvû¯ÿíúü¸~{YžOÞ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
17. æö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 Ïx€Link ¿À´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
18. û¯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 ²voUwƒxv~w|1UserAgent ~×ß{_Ü|rº1Vercel x~û¯²ßýw~w
19. û¯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 ²voUwƒxv~w|1UserAgent ~×ß{_Ü|rº1Vercel x~û¯²ßýw~w
20. ÷÷ý´ôÛ~øÛÿ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
21. û¯~rÿÿ_|Y¿s~{
22. ñõ¹üþó¹~/_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_&
23. ã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¼€|rv€utÿ note ÿþüø
    î÷wv{¹3 öo}sù~´þùü·÷ów~zßÏÿj__´þù& x±~wvÿ 3 o{´þùü·÷ó{/w²üð/}}Ž¼»¸ó¸û²~ Chisato wy }½}½3 öo|}xvxwvt»~w1ù~s¼~wx´þùü&
24. ÿö¯wvt»ºÜ Atomic Design ~¿öwxgùW ç[~Atomic Design |×Ww1Storybook |rsv²ûv|÷wz svt»~w1·ó÷ûwûvw´yt³óýüýóø¯Š{w}zt{ xƒxvt~y2 ÿ÷¿|¿ºzt~w1r»oo¯zûw~w·v
    App Router x~û¯ öz»ñõ¹üþó¹UNx1^gözPages Router µýüøÎ~ÿ ýg²ƒowv1û¯u{tzxƒxvt~yÿxtx1xv²ö? ~t»_mxzº}vwy
    ~€ü¼·üzûv¯~wõ ûv¯~/øAngular 1.2 zy~÷tâÛx1Fat Controller |î¼v t»~w~x±vwõwtxƒxvt~y2
25. Îß~]ÿ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~y2Šw²c¼o|rzûww~w·vÿ
26. note xZenn ²´sv~y~w1 õ¹ýüzØtw~yÿ Zenn j__´þùü·÷ó Tech Blog m}g/~ý/UqIT ýՏµüó¹<IT øüóù=~Û÷_1´þùü·÷ óŸ~ñüð~}_Tech Blog wyÿ TšÏ~Õû[/~o¿wrº1Om²ï& note ÿþüø
    j__´þùü·÷ó ¸ó¸û²ñüðÿnote j__´þùü·÷ó~¸ó¸û²ñüð{¸»1¸ó¸û²öý°note wyÿ }~~oW´ñüðñóðü1´ùóøtxzy{ttv~åy²~ïwvt~yÿ