Next.js で SPA を構築する際の辛み

※ 2024/2 の情報ですので最新情報と乖離がある可能性があります。

https://mierune.connpass.com/event/309293/ で発表した内容です

Transcript

1. ౉ล൏ਓ
   
   /FYUKT
   Ͱ
   41"
   Λߏங͢ΔࡍͷਏΈ .*&36/&
   ##2
   
2. ࣗݾ঺հ ౉ล൏ਓ wגࣜձࣾαʔόʔϫʔΫεॴଐ
   wϑϩϯτΤϯυ΍Γ͕ͪ
   😇
   w
   d
   ࡳຈࡏॅ
   w9
   ͳ΂
   !OBCFDNEDUSM
3. ݁࿦
   /FYUKT
   ͱ͸
   ͳͥ
   /FYUKT
   ΛબΜͩͷ͔
   /FYUKT
   Ͱ
   41"
   Λߏங͢ΔࡍͷਏΈ
   ·ͱΊ
4. ݁࿦ w/FYUKT
   Ͱ
   41"
   4JOHMF
   1BHF
   "QQMJDBUJPO
   ͷߏங͸΍ΊΑ͏
   w7JUF
   
   Ћ
   Λ࢖͓͏
   w໨తʹԠͯ͡ద੾ͳπʔϧΛબ΅͏
5. /FYUKT
   ͱ͸ w3FBDU
   ͷϑϨʔϜϫʔΫ
   w3FBDU
   ͷΈ で
   8FC
   "QQ
   Λ։ൃ͢ΔࡍͷՁ஋ΛੜΈ ず Β͍ॏ࿑ಇΛഉআ
   wϓϩδΣΫτߏ଄ʹϚοϓ͞Εͨ഑৴
   63-
   ϧʔςΟϯά
   w֤छϨϯμϦϯάख๏
   ΫϥΠΞϯταΠυɺαʔόʔαΠυ
   wσʔλऔಘ
   8FC
   "1*
   ௨৴
   wͳͲͳͲ
6. ͳͥ
   /FYUKT
   ΛબΜͩͷ͔ w3FBDU
   ͸ プ ϩ ダ Ϋγϣϯ グ Ϩʔ ド ͷ։ൃ で ϑϨʔϜϫʔΫͷ࠾༻Λਪ঑͍ͯ͠Δ
   wIUUQTKBSFBDUEFWMFBSOTUBSUBOFXSFBDUQSPKFDU
   w/FYUKT
   ͸ଞͷϑϨʔϜϫʔΫͱൺֱ͠γΣΞ͕ѹ౗త
   wIUUQTOQNUSFOETDPNHBUTCZWTOFYUWTSFNJY
   w/FYUKT
   ͷυΩϡϝϯτಡΜͩײ͡
   41"
   ΋͍͚ͦ͏٩
   ᐛ
   و
   • Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server. wIUUQTOFYUKTPSHEPDTBQQCVJMEJOHZPVSBQQMJDBUJPOEFQMPZJOHTUBUJDFYQPSUT
7. /FYUKT
   Ͱ
   41"
   Λߏங͢ΔࡍͷਏΈ wCMPH<JE>
   ͷΑ͏ͳಈత パ ϥϝʔλͷऔಘ
   w/FYUKT
   "1*
   ͷ੍໿ʹΑΓϏϧυ࣌ʹಈత パ ϥϝʔλΑΔ デ ʔλΛऔಘ͢Δඞཁ͋Γ
   wIUUQTOFYUKTPSHEPDTBQQCVJMEJOHZPVSBQQMJDBUJPOSPVUJOHEZOBNJD SPVUFTHFOFSBUJOHTUBUJDQBSBNT
   w41"
   ͕ѻ͏σʔλͷߋ৽ස౓͕Ϗϧυස౓ΑΓߴ͍৔߹ɺσʔλߋ৽ͷͨΊʹϏϧυ ͱ࠶σϓϩΠ͕ඞཁʜ
   🥺 %ZOBNJD
   3PVUJOH
   ͕Ϣʔεέʔεʹ߹Θͳ͍
8. /FYUKT
   Ͱ
   41"
   Λߏங͢ΔࡍͷਏΈ wCMPH JEYYY
   ͷΑ͏ͳΫΤϦ パ ϥϝʔλͱϑϩϯτΤϯυͰͷඳըΛߟ͑Δ
    /FYUKT
   ͷࢫΈͰ͋ΔϓϩδΣΫτߏ଄ʹϚοϓ͞Εͨ഑৴
   63-
   ׆͔ͤͯΔʁ
    3FBDU
   4VTQFOTF
   ίϯϙʔωϯτʹΑΔϑΥʔϧόοΫॲཧ͕ඞਢ
   wϚʔΫΞοϓ͕ංେԽ͢Δ
   wΫΤϦύϥϝʔλऔಘ͸
   )ZESBUJPO
   ׬ྃΛ଴ͭඞཁ͕͋Δ %ZOBNJD
   3PVUJOH
   ͕Ϣʔεέʔεʹ߹Θͳ͍ɺͦΕͰ΋ఘΊͳ͍ʂ
9. /FYUKT
   Ͱ
   41"
   Λߏங͢ΔࡍͷਏΈ w։ൃ࣌
   ϩʔΧϧͷ
   /PEF
   αʔόʔ͔Β഑৴
   wίʔυͷมߋ͕ଈ࣌ʹ൓ө͞Εͯ
   (PPE
   w443
   ͞Ε͍ͯΔͧʜ
   wσϓϩΠ࣌
   Ϗϧυ੒Ռ෺
   )5.-
   Λ
   "NB[PO
   4
   ͔Β഑৴
   wαʔόʔαΠυʹίϯϐϡʔςΟϯάॲཧ͸ͳ͍
   wϒϥ΢β্ͰϨϯμϦϯά͞ΕΔ
   wͳΜ͔ɺ։ൃͱσϓϩΠͰҧ͏ؾ͕͢Δʜ ։ൃ؀ڥͱσϓϩΠ؀ڥͷࠩ෼
10. /FYUKT
    Ͱ
    41"
    Λߏங͢ΔࡍͷਏΈ wσϓϩΠޙʹ౸ୡՄೳͳ
    63-
    ͕
    YYYJOEFYIUNM
    ʹͳ͍ͬͯΔ͜ͱʹؾͮ͘ʜ
    w։ൃத͸
    YYY
    ͰΞΫηεͰ͖͍͕ͯͨɺσϓϩΠ؀ڥ͸ҧͬͨʂ
    w&&
    ςετίʔυ͕ҙຯΛͳ͞ͳ͘ͳͬͨ
    wσϓϩΠ؀ڥͰ
    SFXSJUF
    ॲཧΛॻ͘͜ͱͰରԠՄೳ
    wϖʔδ਺͕ଟ͍ͱݱ࣮తͰ͸ͳ͍ ։ൃ؀ڥͱσϓϩΠ؀ڥͷࠩ෼
11. ·ͱΊ w/FYUKT
    Ͱ
    41"
    4UBUJD
    &YQPSUT
    Λ࢖༻͢Δࡍ͸ඇରԠػೳΛཁ֬ೝ
    wIUUQTOFYUKTPSHEPDTBQQCVJMEJOHZPVSBQQMJDBUJPOEFQMPZJOHTUBUJD FYQPSUTVOTVQQPSUFEGFBUVSFT
    w/FYUKT
    ίϛϡχςΟͰ΋͜ͷΑ͏ͳ࿩͕͞Ε͍ͯΔ໛༷
    w41"
    ͸ઃܭࢥ૝ʹ൓͍ͯ͠ΔͷͰ࢖༻͢Δͳ೿ͱ
    41"
    ͷಈతϧʔςΟϯά͸ඞཁ ೿͕͍Δ
    wIUUQTHJUIVCDPNWFSDFMOFYUKTJTTVFT ৼΓฦΓ
12. ·ͱΊ wখن໛
    PS
    Ͳ͏ͯ͠΋
    41"
    Ͱ࣮ݱ͍ͨ͠৔߹
    w3FBDU
    
    7JUF
    
    3FBDU
    3PVUFS
    Ͱ࣮૷͢Δ
    wࣗલͰ΍Δ͜ͱ͕ଟ͘ͳΔͷͰɺͦͷ఺Λߟྀ͢Δ͜ͱ
    wIUUQTKBWJUFKTEFW
    wେن໛
    PS
    41"
    Ͱ࣮ݱ͠ͳͯ͘ྑ͍
    w/FYUKT
    wαʔόʔαΠυίϯϐϡʔςΟϯάඅ༻΋ߟྀ͢Δ͜ͱ ͜Ε͔Βͷࢦ਑
13. 5IBOL
    ZPV ϚαΧϦ଴ͬͯ·͢ʂ 🫶