From 18ef00ceaa035c1fd2dbd162ecb6fd81a6b5b8a0 Mon Sep 17 00:00:00 2001 From: suhaotian Date: Wed, 28 Feb 2024 12:23:28 +1100 Subject: [PATCH] chore(next-example): add edge example and publish to vercel --- next-example/README.md | 39 +++--------------- next-example/app/api/hello-edge/route.ts | 9 +++++ next-example/app/api/hello-node/route.ts | 9 +++++ next-example/app/http.ts | 12 ++++++ next-example/app/page.tsx | 5 +-- next-example/app/xior-instance.ts | 9 +---- next-example/middleware.mjs | 28 +++++++++++++ next-example/package.json | 2 +- pnpm-lock.yaml | 50 ++++++++++++++++++++++++ 9 files changed, 118 insertions(+), 45 deletions(-) create mode 100644 next-example/app/api/hello-edge/route.ts create mode 100644 next-example/app/api/hello-node/route.ts create mode 100644 next-example/app/http.ts create mode 100644 next-example/middleware.mjs diff --git a/next-example/README.md b/next-example/README.md index c403366..5f8ffbe 100644 --- a/next-example/README.md +++ b/next-example/README.md @@ -1,36 +1,9 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# Example for next and vercel edge functions -## Getting Started +Make sure it's work in vercel enviroment. -First, run the development server: +Links: -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +https://xior-next-example.vercel.app/ +https://xior-next-example.vercel.app/api/hello-edge +https://xior-next-example.vercel.app/api/hello-node diff --git a/next-example/app/api/hello-edge/route.ts b/next-example/app/api/hello-edge/route.ts new file mode 100644 index 0000000..906edb3 --- /dev/null +++ b/next-example/app/api/hello-edge/route.ts @@ -0,0 +1,9 @@ +import { http } from '@/app/http'; + +export const runtime = 'edge'; +export const dynamic = 'force-dynamic'; // static by default, unless reading the request + +export async function GET(request: Request) { + const { data } = await http.get('https://google.com'); + return new Response(`Hello from ${process.env.VERCEL_REGION} ${data.length}`); +} diff --git a/next-example/app/api/hello-node/route.ts b/next-example/app/api/hello-node/route.ts new file mode 100644 index 0000000..4fc698f --- /dev/null +++ b/next-example/app/api/hello-node/route.ts @@ -0,0 +1,9 @@ +import { http } from '@/app/http'; + +export const runtime = 'nodejs'; +export const dynamic = 'force-dynamic'; // static by default, unless reading the request + +export async function GET(request: Request) { + const { data } = await http.get('https://google.com'); + return new Response(`Hello from ${process.env.VERCEL_REGION} ${data.length}`); +} diff --git a/next-example/app/http.ts b/next-example/app/http.ts new file mode 100644 index 0000000..57222a4 --- /dev/null +++ b/next-example/app/http.ts @@ -0,0 +1,12 @@ +import xior from 'xior'; +import cachePlugin from 'xior/plugins/cache'; +import errorRetryPlugin from 'xior/plugins/error-retry'; +import uploadDownloadProgressPlugin from 'xior/plugins/progress'; +import throttlePlugin from 'xior/plugins/throttle'; + +export const http = xior.create(); + +http.plugins.use(errorRetryPlugin()); +http.plugins.use(throttlePlugin()); +http.plugins.use(cachePlugin()); +http.plugins.use(uploadDownloadProgressPlugin()); diff --git a/next-example/app/page.tsx b/next-example/app/page.tsx index 31172ad..d416763 100644 --- a/next-example/app/page.tsx +++ b/next-example/app/page.tsx @@ -2,9 +2,8 @@ import Image from 'next/image'; import http from './xior-instance'; -console.log(http); - -export default function Home() { +export default async function Home() { + await http.get('https://google.com'); return (
diff --git a/next-example/app/xior-instance.ts b/next-example/app/xior-instance.ts index 9c4cb22..483acea 100644 --- a/next-example/app/xior-instance.ts +++ b/next-example/app/xior-instance.ts @@ -1,17 +1,10 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -// @ts-ignore -import stringify from 'qs/lib/stringify'; import xior, { merge, delay, buildSortedURL, encodeParams } from 'xior'; import cachePlugin from 'xior/plugins/cache'; import errorRetryPlugin from 'xior/plugins/error-retry'; import uploadDownloadProgressPlugin from 'xior/plugins/progress'; import throttlePlugin from 'xior/plugins/throttle'; -// console.log(merge, delay, buildSortedURL); - -const instance = xior.create({ - encode: (params: Record) => stringify(params), -}); +const instance = xior.create({}); instance.plugins.use(errorRetryPlugin({})); instance.plugins.use(cachePlugin({})); instance.plugins.use(throttlePlugin({})); diff --git a/next-example/middleware.mjs b/next-example/middleware.mjs new file mode 100644 index 0000000..83abc21 --- /dev/null +++ b/next-example/middleware.mjs @@ -0,0 +1,28 @@ +import xior from 'xior'; +import cachePlugin from 'xior/plugins/cache'; +import errorRetryPlugin from 'xior/plugins/error-retry'; +import uploadDownloadProgressPlugin from 'xior/plugins/progress'; +import throttlePlugin from 'xior/plugins/throttle'; + +export const http = xior.create(); + +http.plugins.use(errorRetryPlugin()); +http.plugins.use(throttlePlugin()); +http.plugins.use(cachePlugin()); +http.plugins.use(uploadDownloadProgressPlugin()); + +import { NextResponse } from 'next/server'; + +export async function middleware(request) { + const { data } = await http.get('https://google.com'); // for test + console.log(data.length); +} + +export const config = { + matcher: [ + // Skip all internal paths (_next) + '/((?!_next).*)', + // Optional: only run on root (/) URL + // '/' + ], +}; diff --git a/next-example/package.json b/next-example/package.json index eb76e6f..f4d801c 100644 --- a/next-example/package.json +++ b/next-example/package.json @@ -12,7 +12,7 @@ "react": "^18", "react-dom": "^18", "next": "14.1.0", - "xior": "workspace:*" + "xior": "^0.0.7" }, "devDependencies": { "typescript": "^5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 27b64ba..526004a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -76,6 +76,49 @@ importers: specifier: ^5.3.3 version: 5.3.3 + edge-examples/vercel-edge: + dependencies: + next: + specifier: 14.1.0 + version: 14.1.0(react-dom@18.2.0)(react@18.2.0) + react: + specifier: ^18 + version: 18.2.0 + react-dom: + specifier: ^18 + version: 18.2.0(react@18.2.0) + xior: + specifier: 0.0.7 + version: 0.0.7 + devDependencies: + '@types/node': + specifier: ^20 + version: 20.11.13 + '@types/react': + specifier: ^18 + version: 18.2.59 + '@types/react-dom': + specifier: ^18 + version: 18.2.19 + autoprefixer: + specifier: ^10.0.1 + version: 10.4.17(postcss@8.4.35) + eslint: + specifier: ^8 + version: 8.56.0 + eslint-config-next: + specifier: 14.1.0 + version: 14.1.0(eslint@8.56.0)(typescript@5.3.3) + postcss: + specifier: ^8 + version: 8.4.35 + tailwindcss: + specifier: ^3.3.0 + version: 3.4.1 + typescript: + specifier: ^5 + version: 5.3.3 + next-example: dependencies: next: @@ -4804,6 +4847,13 @@ packages: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} dev: true + /xior@0.0.7: + resolution: {integrity: sha512-WO9ZdL2QTqoZHqCtt5AJvAswpYHRpNt5y+62tpVfpiIEa9nASceW+W0m+cr7u9uNyt0UFJ1gRPo3mmD3ebDPog==} + dependencies: + tiny-lru: 11.2.5 + ts-deepmerge: 7.0.0 + dev: false + /xtend@4.0.2: resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} engines: {node: '>=0.4'}