https://github.com/gomagoma676/edge-new-features-demo
🔑 Simple demo of new features of Nextjs 12.2- especially for middleware + Edge API route
https://github.com/gomagoma676/edge-new-features-demo
nextjs supabase
Last synced: 4 months ago
JSON representation
🔑 Simple demo of new features of Nextjs 12.2- especially for middleware + Edge API route
- Host: GitHub
- URL: https://github.com/gomagoma676/edge-new-features-demo
- Owner: GomaGoma676
- Created: 2022-07-24T07:07:07.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-18T05:54:36.000Z (over 2 years ago)
- Last Synced: 2025-01-10T15:49:24.509Z (9 months ago)
- Topics: nextjs, supabase
- Language: TypeScript
- Homepage:
- Size: 66.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🦊 Overview (new edge related features Nextjs12.2〜)
This demo covers new middleware (A/B test example by Vercel) and comparison of Edge API route (ε) vs Conventional API route (λ) with Supabase.
You will see response time of Edge API route is much faster than conventional API route (λ) handled by Vercel's serverless function.
__Key points in new updates__
・One root middleware file (named middleware.ts) shall be placed on same directory of pages folder.
・Middleware is only dedicated for dynamic routing such as redirect, if you want to create high performacne API endpoint now you should use Edge API routes.
## Project setup
~~~
npx create-next-app@12.3.3 edge-new-features --typescript
yarn add next@12.3.3
yarn add @heroicons/react@1.0.6 @supabase/supabase-js@1.35.4
yarn add -D tailwindcss postcss autoprefixer
yarn add -D prettier prettier-plugin-tailwindcss
~~~
https://tailwindcss.com/docs/guides/nextjs
## Reference
https://nextjs.org/blog/next-12-2
https://www.youtube.com/watch?v=j7rPSS9Ovsw
https://nextjs.org/docs/api-routes/edge-api-routes