Vercel Ship まとめ「2023/5/1-5」

2023年5月に開催された Vercel Ship というイベントで、Next.js の最新バージョンや新しいツールや機能などが発表されました。
ざっくりどんな内容かをまとめましたので是非。

Youtube の動画もあります。
https://youtu.be/vskB83LUSuc

Transcript

1. Vercel Ship ·ͱΊ Storage ΍ Next.js 13.4 ͳͲ͕ൃද͞ΕͨͷͰ·ͱΊ·͢ yukimasa ikeda
2. What is a Vercel Ship?
3. Vercel Ship 2023/5/1 - 5 ʹ Vercel ࣾʹΑͬͯ 
 ։࠵͞ΕͨΠϕϯτ Vercel ࣾͷαʔϏε΍ٕज़ʹؔ͢Δ ࠷৽ͷ৘ใٴͼ Vercel Λར༻ͨ͠ ΢Σϒ։ൃʹؔ͢Δ৘ใΛൃද
4. Կ͕ൃද͞Εͨͷʁ
5. Storage Security Collaborate Dynamic Ecosystem
6. Storage Day One
7. Vercel Storage Vercel Ͱར༻Ͱ͖ΔαʔόʔϨεͳετϨʔδ αʔϏε 3 ͭͷαʔϏε͕ൃද͞Εͨ
9. Vercel KV
10. Vercel KV Vercel Postgres
11. Vercel KV Vercel Postgres Vercel Blob
12. Vercel KV Upstash ͱ࿈ܞͨ͠ Serverless Redis Edge Functions ΍ Server Functions ͔Β 
 SDK ܦ༝Ͱ࢖༻Մೳͳ Key Value ετΞ
13. Vercel Postgres Neon ͱ࿈ܞͨ͠ϑϩϯτΤϯυ޲͚ͷ Serverless SQL database Next.js ͳͲͰ؆୯ʹσʔλࢀর΍ొ࿥Λߦ͏͜ ͱ͕Ͱ͖ΔΑ͏ʹͳΔ Prisma ͳͲͷ ORM Λ࢖༻͢Δ͜ͱ͕Ͱ͖Δ
14. Vercel Blob Cloud fl are R2 ͱ࿈ܞͨ͠ΤοδͰಈ͘ϑΝΠϧ ετϨʔδ S3 ΍ GCS ͷΑ͏ͳΦϒδΣΫτετϨʔδ
15. ಛ௃ • ઃఆ͕༰қͰ؆୯ʹ࢖༻Ͱ͖Δ • ྉۚࣗମ͸ߴΊ • ࿈ܞݩͷαʔϏεΛ௚઀࢖༻͢Δ΄͏͕͍҆ • Vercel KV, Vercel Postgres ͸ HobbyɺPro ϓϥϯͰ Beta൛ ͱͯ͠ͷར༻ͷΈ ͕Մೳ • Vercel Blob ͸ Beta൛ Ͱར༻Մೳ͕ͩɺ WaitList ΁ͷొ࿥͕ඞཁ • ೔ຊϦʔδϣϯ͸ඇରԠ
16. Security Day Two
17. Security ηΩϡϦςΟؔ࿈ͷαʔϏε͕2ͭൃද͞Εͨ
18. Security • Vercel Firewall • Vercel Secure Compute
19. Vercel Firewall • ΧελϜϧʔϧΛ௥Ճͯ͠ IP ΛϒϩοΫ͢Δ ͜ͱ͕Մೳ • DDoS؇࿨ͱIPϒϩοΩϯά • Entreprise ϓϥϯͷΈ
21. Vercel Secure Compute • VPC ͷར༻͕Մೳ • Serverless Functions ͱ σʔλϕʔεͳͲ όοΫΤϯυΫϥ΢υͷؒʹϓϥΠϕʔτ ͳ઀ଓΛ࡞੒Ͱ͖Δ • Entreprise ϓϥϯͷΈ
22. Day Three Collaborate
23. Collaborate νʔϜ։ൃϓϩηεͷڧԽ΍ϓϩμΫτʹؔΘ Δؔ܎ऀͱͷ࿈ܞ͕Ͱ͖Δ 2 ͭͷπʔϧΛൃද
24. Collaborate • Vercel Spaces • Vercel Editing
25. Vercel Spaces • ։ൃऀ޲͚μογϡϘʔυ • ࠓ·ͰͷϏϧυϩά͕ΑΓৄࡉʹͳͬͨ • Github Actions ͷΑ͏ͳ CI/CD ͕Ͱ͖Δ • αʔϏεͷύϑΥʔϚϯε෼ੳ͕Ͱ͖Δ
27. Vercel Editing • Headless CMS Λ࢖༻ͨ͠ Web αΠτ্Ͱɺ ίϯςϯπͷฤूΛϦΞϧλΠϜͰߦ͏͜ͱ ͕Ͱ͖Δ • ݱࡏ͸ private bata ൛ ͱͯ͠ Sanity ·ͨ͸ Builder ͱ͍͏αʔϏεͰར༻Մೳ
29. Dynamic Day Four
31. Dynamic Next.js 13.4 ◆ App Router ( Stable ) ◆ Turbopack ( Beta ) ◆ Server Actions ( Alpha )
32. Dynamic Next.js 13.4 ◆ App Router ( Stable ) ◆ Turbopack ( Beta ) ◆ Server Actions ( Alpha )
33. App Router ?
34. Next.js ͷ৽͍͠ Routing ํࣜ
35. App Router ৽͍͠ Routing ͷઃఆํ๏ layout ϑΝΠϧͷొ৔ RSC ( React Server Component ) ͷಋೖ
36. ৽͍͠ Routing ͷઃఆํ๏ • ࠓ·Ͱ • pages/ σΟϨΫτϦҎԼʹઃஔͨ͠ϑΝΠϧ໊Ͱ Routing ͞ΕΔ • App Router • app/ σΟϨΫτϦҎԼʹઃஔͨ͠ page.tsx Ͱ Routing ͞ΕΔ
37. ৽͍͠ Routing ͷઃఆํ๏ • app/page.tsx → / • app/dashboard/page.tsx → /dashboard
38. layout ϑΝΠϧͷొ৔ • layout.tsx ͱ͍͏ڞ௨ϨΠΞ΢τ༻ͷϑΝΠϧ • ઃஔͨ͠֊૚ҎԼͰදࣔ͞ΕΔڞ௨ͷϨΠΞ΢τͱͳΔ
39. layout ϑΝΠϧͷొ৔ ϧʔτϖʔδ ( / ) ͸ app/layout.js ͕ద༻͞ΕɺμογϡϘʔυϖʔδ ( /dashboard ) ͸ app/layout.js ͱ app/dashboard/layouts.js ͷ 2 ͭͷ ϨΠΞ΢τ͕ద༻͞ΕΔ
40. RSC ( React Server Component ) ͷಋೖ • RSC ͱ͸ʁ • → αʔόʔ༻ͷίϯϙʔωϯτʢ Next ͡Όͳͯ͘ React18 Ͱͷ࿩ ʣ • αʔόʔͰ࣮ߦ͞ΕΔ෦෼ͱϑϩϯτͰ࣮ߦ͞ΕΔ෦෼͕͋ΔͨΊɺαʔόʔ༻ͱ͠ ࣮ͯߦ͞ΕΔίϯϙʔωϯτʢ SSR Ͱ͸ͳ͍ʣ • ίϯϙʔωϯτ୯ҐͰαʔόʔଆͰσʔλϑΣονΛ͠ɺԾ૝DOMͷੜ੒·ͰΛߦ͏ • ݫີʹ͸Ծ૝DOMΛγϦΞϥΠζͨ͠΋ͷ • useState ͳͲͷ Hooks ͸࢖༻Ͱ͖ͳ͍
41. Կ͕خ͍͠ʁ
42. RSC ͷϝϦοτ • όϯυϧαΠζΛখ͕͘͞Ͱ͖Δ • αʔόʔ͕ಘҙͳॲཧ͸αʔόʔͰߦ͍ɺ࢒ΓͷॲཧΛϑϩϯτଆ ʹҾ͖ܧ͙͜ͱͰɺϒϥ΢βʹ౉͢σʔλྔ͕ݮΔ • ΫϥΠΞϯτίϯϙʔωϯτͷ࣮ߦॲཧ͕ݮΔ
43. RSC ͷσϝϦοτ • σʔλߋ৽ܥͰ͸݁ہΫϥΠΞϯτίϯϙʔωϯτͰ API ͷ࣮ߦ͕ඞ ཁ • RSC ͸දࣔʹಛԽͨ͠΋ͷ • طଘͷ page router ͔ΒҠߦ͢Δ৔߹͸ίετ͕͔͔Δ
44. Ecosystem Day Five
45. Ecosystem ΤίγεςϜ΁ͷαϙʔτڧԽ΍࿈ܞ
46. Ecosystem • ೝূαʔϏεʮClerkʯͱͷ࿈ܞ • Nuxt.js ͷαϙʔτ
47. Clerk • ReactɺNext.jsͳͲͷϞμϯ΢ΣϒͷͨΊʹ࡞ΒΕ ͨೝূαʔϏε • Next.js ͳͲͷϑϨʔϜϫʔΫʹಛԽͨ͠ SDK Λఏ ڙ • <SignIn/> ΍ <UserPro fi le/> ͳͲͷίϯϙʔωϯτ Λ࢖༻͢Δ͚ͩͰೝূUI͕࡞੒Ͱ͖Δ • App Router ΁ͷରԠͷՄೳ
49. Nuxt.js Nuxt.js 3 Ͱαϙʔτ͞Εͨ Nitro ( αʔόʔΤϯ δϯ ) ͱ࿈ܞ͠ɺ Vercel KV Λར༻Ͱ͖ΔΑ͏ ʹͨ͠ΓɺISR ͷ׆༻͕Մೳͱͳͬͨ
50. Storage Security Collaborate Dynamic Ecosystem
51. Storage 👀 Security Collaborate Dynamic 👀 Ecosystem
52. Vercel ͸ϑϩϯτΤϯυΛத৺ͱͨ͠ Ϋϥ΢υͱͯ͠ࠓޙ΋஫໨͍ͯ͜͠͏