diff --git a/docs/02-app/01-building-your-application/06-optimizing/10-third-party-libraries.mdx b/docs/02-app/01-building-your-application/06-optimizing/10-third-party-libraries.mdx index d26c18dd3b999..e4fe3ed67dab2 100644 --- a/docs/02-app/01-building-your-application/06-optimizing/10-third-party-libraries.mdx +++ b/docs/02-app/01-building-your-application/06-optimizing/10-third-party-libraries.mdx @@ -240,7 +240,7 @@ docs](https://developers.google.com/maps/documentation/embed/embedding-map). | `allowfullscreen` | Optional | Property to allow certain map parts to go full screen. | | `loading` | Optional | Defaults to lazy. Consider changing if you know your embed will be above the fold. | | `q` | Optional | Defines map marker location. _This may be required depending on the map mode_. | -| `center` | Optional | Defines the center of the map view. | +| `center` | Optional | Defines the center of the map view. | | `zoom` | Optional | Sets initial zoom level of the map. | | `maptype` | Optional | Defines type of map tiles to load. | | `language` | Optional | Defines the language to use for UI elements and for the display of labels on map tiles. | diff --git a/examples/inngest/.env.development b/examples/inngest/.env.development new file mode 100755 index 0000000000000..aa2b20861928e --- /dev/null +++ b/examples/inngest/.env.development @@ -0,0 +1,2 @@ +INNGEST_EVENT_KEY=your-event-key +INNGEST_SIGNING_KEY=your-signing-key \ No newline at end of file diff --git a/examples/inngest/.gitignore b/examples/inngest/.gitignore new file mode 100755 index 0000000000000..8f322f0d8f495 --- /dev/null +++ b/examples/inngest/.gitignore @@ -0,0 +1,35 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/inngest/README.md b/examples/inngest/README.md new file mode 100755 index 0000000000000..bdcf54db89fdf --- /dev/null +++ b/examples/inngest/README.md @@ -0,0 +1,54 @@ +# Next.js and Inngest Example + +This is an example of how to use [Inngest](https://inngest.com) to easily add durable work flows to your Next.js application. It keeps things simple: + +- Bare bones examples with a single button UI that triggers an event +- Runs the Inngest dev server locally for immediate feedback + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/inngest&project-name=inngest&repository-name=inngest) + +To full deploy you'll need an [Inngest Cloud account](https://inngest.com) and the [Vercel Inngest integration](https://vercel.com/integrations/inngest) configured. + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), [pnpm](https://pnpm.io), or [Bun](https://bun.sh/docs/cli/bunx) to bootstrap the example: + +```bash +npx create-next-app --example inngest inngest-app +``` + +```bash +yarn create next-app --example inngest inngest-app +``` + +```bash +pnpm create next-app --example inngest inngest-app +``` + +```bash +bunx create-next-app --example inngest inngest-app +``` + +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). + +## Notes + +First, run the development server: + +```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. + +The Inngest dev server will be running at [http://localhost:8288](http://localhost:8288). It can take a few seconds to start up. diff --git a/examples/inngest/next.config.js b/examples/inngest/next.config.js new file mode 100755 index 0000000000000..767719fc4fba5 --- /dev/null +++ b/examples/inngest/next.config.js @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {} + +module.exports = nextConfig diff --git a/examples/inngest/package.json b/examples/inngest/package.json new file mode 100755 index 0000000000000..3592b8cd9bb7f --- /dev/null +++ b/examples/inngest/package.json @@ -0,0 +1,24 @@ +{ + "private": true, + "scripts": { + "dev": "concurrently \"npm:dev:*\"", + "dev:next": "next dev", + "dev:inngest": "npx inngest-cli@latest dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "inngest": "^3.4.1", + "next": "latest", + "react": "18.2.0", + "react-dom": "18.2.0" + }, + "devDependencies": { + "@types/node": "20.7.0", + "@types/react": "18.2.23", + "@types/react-dom": "18.2.7", + "concurrently": "^8.2.1", + "encoding": "^0.1.13", + "typescript": "5.2.2" + } +} diff --git a/examples/inngest/src/app/api/inngest/route.ts b/examples/inngest/src/app/api/inngest/route.ts new file mode 100755 index 0000000000000..ed9c2f485a542 --- /dev/null +++ b/examples/inngest/src/app/api/inngest/route.ts @@ -0,0 +1,5 @@ +import { serve } from 'inngest/next' +import { inngest } from '@/inngest/inngest.client' +import { helloWorld } from '@/inngest/functions/hello-world' + +export const { GET, POST, PUT } = serve(inngest, [helloWorld]) diff --git a/examples/inngest/src/app/layout.tsx b/examples/inngest/src/app/layout.tsx new file mode 100755 index 0000000000000..52ca0eb7bc80a --- /dev/null +++ b/examples/inngest/src/app/layout.tsx @@ -0,0 +1,18 @@ +import type { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Next.js Inngest Example', + description: 'Generated by create next app', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/examples/inngest/src/app/page.tsx b/examples/inngest/src/app/page.tsx new file mode 100755 index 0000000000000..a19c4b3261e38 --- /dev/null +++ b/examples/inngest/src/app/page.tsx @@ -0,0 +1,24 @@ +import { inngest } from '@/inngest/inngest.client' +import { redirect } from 'next/navigation' + +export default function Home() { + async function triggerInngestEvent() { + 'use server' + await inngest.send({ + name: 'test/hello.world', + data: { + message: 'Hello from Next.js!', + }, + }) + redirect('http://localhost:8288/stream') + } + return ( +
+
+
+ +
+
+
+ ) +} diff --git a/examples/inngest/src/inngest/functions/hello-world.ts b/examples/inngest/src/inngest/functions/hello-world.ts new file mode 100755 index 0000000000000..304bb6d9552dc --- /dev/null +++ b/examples/inngest/src/inngest/functions/hello-world.ts @@ -0,0 +1,10 @@ +import { inngest } from '../inngest.client' + +export const helloWorld = inngest.createFunction( + { id: 'hello-world', name: 'Hello World' }, + { event: 'test/hello.world' }, + async ({ event, step }) => { + await step.sleep('sleep for a second', '1s') + return { event, body: event.data.message } + } +) diff --git a/examples/inngest/src/inngest/inngest.client.ts b/examples/inngest/src/inngest/inngest.client.ts new file mode 100755 index 0000000000000..0e8d5db8e1eef --- /dev/null +++ b/examples/inngest/src/inngest/inngest.client.ts @@ -0,0 +1,4 @@ +import { Inngest } from 'inngest' + +// Create a client to send and receive events +export const inngest = new Inngest({ name: 'Basic Inngest Application' }) diff --git a/examples/inngest/tsconfig.json b/examples/inngest/tsconfig.json new file mode 100755 index 0000000000000..e59724b283f9c --- /dev/null +++ b/examples/inngest/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +}