Merge pull request #709 from novuhq/nv-4304-docs-feedback-add-informa…

…tions-about-how-to-use-novu-with docs(framework): add NestJS guide and icons
novuhq · Oct 10, 2024 · c680b46 · c680b46
2 parents 1266431 + 48554c8
commit c680b46
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 24 deletions.
diff --git a/mint.json b/mint.json
@@ -81,9 +81,10 @@
       "pages": [
         "quickstart/overview",
         "quickstart/nextjs",
-        "quickstart/svelte",
-        "quickstart/remix",
         "quickstart/express",
+        "quickstart/remix",
+        "quickstart/nestjs",
+        "quickstart/svelte",
         "quickstart/nuxt",
         "quickstart/h3",
         "quickstart/lambda"

diff --git a/quickstart/nestjs.mdx b/quickstart/nestjs.mdx
@@ -0,0 +1,148 @@
+---
+title: "How to send notifications with NestJS and Novu Framework"
+sidebarTitle: "NestJS"
+---
+
+import LocalStudio from "/snippets/quickstart/start-studio.mdx";
+import DeployApp from "/snippets/quickstart/deploy.mdx";
+import TestStep from "/snippets/quickstart/test.mdx";
+import PackagesStep from "/snippets/quickstart/packages.mdx";
+import SecretStep from "/snippets/quickstart/secret.mdx";
+import NextStepsStep from "/snippets/quickstart/next-steps.mdx";
+import WorkflowStep from "/snippets/quickstart/workflow.mdx";
+
+In this guide, we will add a Novu [Bridge Endpoint](/concepts/endpoint) to a NestJS application and send our first test workflow.
+
+<Steps>
+    <LocalStudio />
+    <PackagesStep />
+    <Step title="Add the NovuModule to your application">
+        The `NovuModule` is a NestJS module that registers the Novu Endpoint in your application.
+
+        The following example does not support NestJS dependency injection. If you need to `@Injectable` dependencies in your workflow definition, see [Advanced Usage](#advanced-usage-dependency-injection).
+
+        <CodeGroup>
+            ```typescript src/app.module.ts
+            import { Module } from '@nestjs/common';
+            import { NovuModule } from '@novu/framework/nest';
+            import { testWorkflow } from './novu/workflows';
+
+            @Module({
+                imports: [
+                    NovuModule.register({
+                        apiPath: '/api/novu',
+                        workflows: [testWorkflow],
+                    }),
+                ],
+            })
+            export class AppModule {}
+            ```
+        </CodeGroup>
+    </Step>
+    <SecretStep />
+
+    <Step title="Create your workflow definition">
+        Add a `novu` folder in your `src` folder as such ```src/novu/workflows.ts``` that will contain your workflow definitions.
+
+        <WorkflowStep />
+    </Step>
+
+    <Step title="Start your application">
+        Start your NestJS application with the Novu Endpoint configured.
+
+        If your NestJS application is running on other than `4000` port, restart the `npx novu dev` command with the port:
+
+        ```tsx
+        npx novu@latest dev --port <YOUR_NESTJS_PORT>
+        ```
+    </Step>
+    <TestStep framework="NestJS" />
+    <DeployApp />
+
+</Steps>
+
+<NextStepsStep />
+
+## Advanced Usage (Dependency Injection)
+
+If you need to inject dependencies into your workflow definition, you can use the `registerAsync` method.
+
+Add the `NovuModule` using the `registerAsync` method to your `AppModule`.
+
+```typescript src/app.module.ts
+import { Module } from '@nestjs/common';
+import { NovuModule } from '@novu/framework/nest';
+import { NotificationService } from './notification.service';
+import { UserService } from './user.service';
+
+@Module({
+  imports: [
+    NovuModule.registerAsync({
+      imports: [AppModule],
+      useFactory: (notificationService: NotificationService) => ({
+        apiPath: '/api/novu',
+        workflows: [notificationService.welcomeWorkflow()],
+      }),
+      inject: [NotificationService],
+    }),
+  ],
+  providers: [NotificationService, UserService],
+  exports: [NotificationService],
+})
+export class AppModule {}
+```
+
+For example, you might need to inject a service that fetches the user's name from a database. This is useful when you need to fetch data in realtime during the execution of your workflow.
+
+An example `UserService` is available below with hardcoded values, but in a real-world application you might use a database or an external API to fetch the user's name.
+
+```typescript src/user.service.ts
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class UserService {
+  getUser(id: string) {
+    return {
+      name: 'John Doe',
+      email: `john.doe.${id}@example.com`,
+    };
+  }
+}
+```
+
+Finally, configure your `NotificationService` to use the injected `UserService`.
+
+```typescript src/notification.service.ts
+import { Injectable } from '@nestjs/common';
+import { workflow } from '@novu/framework';
+import { z } from 'zod';
+import { UserService } from './user.service';
+
+@Injectable()
+export class NotificationService {
+  constructor(private readonly userService: UserService) {}
+
+  public welcomeWorkflow() {
+    return workflow(
+      'welcome-email',
+      async ({ step, payload }) => {
+        await step.email('send-email', async () => {
+          const user = this.userService.getUser(payload.userId);
+
+          return {
+            subject: `Hello, ${user.name}`,
+            body: `We are glad you are here!`,
+          };
+        });
+      },
+      {
+        payloadSchema: z.object({
+          userId: z.string(),
+        }),
+      }
+    );
+  }
+}
+```
+
+A full example NestJS application demonstrating dependency injection is available [here](https://github.com/novuhq/novu/tree/next/playground/nestjs).
diff --git a/quickstart/overview.mdx b/quickstart/overview.mdx
@@ -4,24 +4,22 @@ sidebarTitle: "Overview"
 description: "Start building with Novu by following our Quick Start guides. These guides provide step-by-step instructions for integrating Novu into your application."
 ---
 
-
+import { SvelteIcon } from "/snippets/icons/svelte.mdx";
+import { NestjsIcon } from "/snippets/icons/nestjs.mdx";
+import { ExpressjsIcon } from "/snippets/icons/expressjs.mdx";
+import { LambdaIcon } from "/snippets/icons/lambda.mdx";
+import { NuxtIcon } from "/snippets/icons/nuxt.mdx";
+import { NextjsIcon } from "/snippets/icons/nextjs.mdx";
+import { RemixIcon } from "/snippets/icons/remix.mdx";
+import { H3Icon } from "/snippets/icons/h3.mdx";
 
 <CardGroup cols={3}>
-    <Card title="Next.js" color="#00D7FE" href="/quickstart/nextjs">
-    </Card>
-    <Card title="Express.js" color="#47BA87" href="/quickstart/express">
-    </Card>
-    <Card title="Remix"  color="#BC002C" href="/quickstart/remix">
-    </Card>
-    <Card title="Svelte" color="#16a34a" href="/quickstart/svelte">
-    </Card>
-    <Card title="Nuxt" color="#16a34a" href="/quickstart/nuxt">
-    </Card>
-    <Card
-        title="H3"
-        color="#16a34a"
-        href="/quickstart/h3">
-
-    </Card>
-
+    <Card title="Next.js" color="#00D7FE" href="/quickstart/nextjs" horizontal icon={<NextjsIcon />} />
+    <Card title="Express.js" color="#47BA87" href="/quickstart/express" horizontal icon={<ExpressjsIcon />} />
+    <Card title="Remix"  color="#BC002C" href="/quickstart/remix" horizontal icon={<RemixIcon />} />
+    <Card title="NestJS"  color="#BC002C" href="/quickstart/nestjs" horizontal icon={<NestjsIcon />} />
+    <Card title="Svelte" color="#16a34a" href="/quickstart/svelte" horizontal icon={<SvelteIcon />} />
+    <Card title="Nuxt" color="#16a34a" href="/quickstart/nuxt" horizontal icon={<NuxtIcon />} />
+    <Card title="H3" color="#16a34a" href="/quickstart/h3" horizontal icon={<H3Icon />} />
+    <Card title="Lambda" color="#16a34a" href="/quickstart/lambda" horizontal icon={<LambdaIcon />} />
 </CardGroup>
diff --git a/quickstart/remix.mdx b/quickstart/remix.mdx
@@ -9,6 +9,7 @@ import TestStep from "/snippets/quickstart/test.mdx";
 import PackagesStep from "/snippets/quickstart/packages.mdx";
 import SecretStep from "/snippets/quickstart/secret.mdx";
 import WorkflowCode from "/snippets/quickstart/workflow.mdx";
+import NextStepsStep from "/snippets/quickstart/next-steps.mdx";
 
 In this guide, we will add a Novu [Bridge Endpoint](/concepts/endpoint) to a Remix application and send our first test workflow.
 

diff --git a/snippets/icons/expressjs.mdx b/snippets/icons/expressjs.mdx
@@ -0,0 +1 @@
+export const ExpressjsIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M126.67 98.44c-4.56 1.16-7.38.05-9.91-3.75-5.68-8.51-11.95-16.63-18-24.9-.78-1.07-1.59-2.12-2.6-3.45C89 76 81.85 85.2 75.14 94.77c-2.4 3.42-4.92 4.91-9.4 3.7l26.92-36.13L67.6 29.71c4.31-.84 7.29-.41 9.93 3.45 5.83 8.52 12.26 16.63 18.67 25.21 6.45-8.55 12.8-16.67 18.8-25.11 2.41-3.42 5-4.72 9.33-3.46-3.28 4.35-6.49 8.63-9.72 12.88-4.36 5.73-8.64 11.53-13.16 17.14-1.61 2-1.35 3.3.09 5.19C109.9 76 118.16 87.1 126.67 98.44zM1.33 61.74c.72-3.61 1.2-7.29 2.2-10.83 6-21.43 30.6-30.34 47.5-17.06C60.93 41.64 63.39 52.62 62.9 65H7.1c-.84 22.21 15.15 35.62 35.53 28.78 7.15-2.4 11.36-8 13.47-15 1.07-3.51 2.84-4.06 6.14-3.06-1.69 8.76-5.52 16.08-13.52 20.66-12 6.86-29.13 4.64-38.14-4.89C5.26 85.89 3 78.92 2 71.39c-.15-1.2-.46-2.38-.7-3.57q.03-3.04.03-6.08zm5.87-1.49h50.43c-.33-16.06-10.33-27.47-24-27.57-15-.12-25.78 11.02-26.43 27.57z"/></svg>)
diff --git a/snippets/icons/h3.mdx b/snippets/icons/h3.mdx
@@ -0,0 +1 @@
+export const H3Icon = () => (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><path fill="#FEB804" d="M17.42 13.51s7.242-11.603 7.407-11.893c.165-.29.2-.822-.255-.822-.454 0-11.737 11.518-11.737 11.518l-8.013 4.75s-.537.33-.455.742c.083.413.443.43.608.43.165 0 8.713-.045 9.21-.06.617-.018.465.86.465.86L9.24 27.54s-2.362 3.27-2.362 3.492c0 .328.394.49.762.27.285-.17 18.71-15.782 19.523-16.854.22-.293.332-1.063-.576-1.063-.907 0-8.134 2.105-8.134 2.105l-1.033-1.98Z"/><path fill="#FFC927" d="M16.152 12.588c-.222.305-.282.815.198.845.477.027 10.237-.046 10.237-.046s-6.972 6.408-9.082 8.32c-2.11 1.913-9.097 8.108-9.567 8.546-.46.43-.878.825-1.048.77-.027-.008-.062-.155.595-1.238.6-.988 6.36-10.64 6.585-11.005.225-.365.422-.675.535-.845.112-.17.477-1.098-.283-1.098s-9.5.226-9.5.226 6.038-5.123 7.783-6.5C14.35 9.184 24.24.794 24.573.794c.332 0-8.195 11.485-8.42 11.793Z"/><path fill="#FFE567" d="M15.863 17.688c.45-.648.892-.695 1.16-.535.345.207.38.684-.055 1.262-.686.915-5.72 7.652-5.913 7.89-.365.45-.902.253-.553-.4.293-.54 4.896-7.547 5.36-8.218Zm-7.156-1.316c-.862.578-1.665-.285-1.087-.917.577-.633 4.368-3.787 5.135-4.44.768-.652 5.248-4.55 5.595-4.83.46-.37.745.005.455.39-.288.385-3.455 3.55-4.852 4.835-1.08.995-4.426 4.412-5.246 4.962Z"/></svg>)
diff --git a/snippets/icons/lambda.mdx b/snippets/icons/lambda.mdx
@@ -0,0 +1 @@
+export const LambdaIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.375 79.375"><path fill="#d86613" d="M0 0h79.375v79.375H0z"/><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.05" d="M23.912 14.38v11.543h8.138l18.974 39.091h13.03V53.54h-5.052l-18.997-39.16ZM29.743 34.868l6.789 13.985-7.371 16.064h-13.61Z"/></svg>)
diff --git a/snippets/icons/nestjs.mdx b/snippets/icons/nestjs.mdx
@@ -0,0 +1 @@
+export const NestjsIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264.583 255.588"><path fill="#e0234e" fill-rule="evenodd" d="M153.338 4.24c-1.809 0-3.489.388-5.04.905 3.296 2.197 5.105 5.105 6.01 8.4.065.453.194.776.258 1.228.065.388.13.775.13 1.163.258 5.687-1.487 6.397-2.715 9.758-1.874 4.33-1.357 8.982.905 12.73.194.452.452.969.776 1.421-2.456-16.348 11.179-18.804 13.699-23.909.194-4.459-3.49-7.431-6.397-9.499-2.78-1.68-5.3-2.197-7.626-2.197zm20.55 3.683c-.26 1.487-.065 1.099-.13 1.874-.064.517-.064 1.163-.129 1.68-.129.517-.258 1.034-.452 1.551-.13.517-.323 1.034-.517 1.551-.259.517-.452.97-.71 1.486-.195.259-.324.517-.518.776l-.388.581c-.323.453-.646.905-.969 1.293-.388.388-.71.84-1.163 1.163v.065c-.388.323-.775.71-1.228 1.034-1.357 1.033-2.908 1.809-4.33 2.778-.452.323-.904.582-1.292.97-.452.323-.84.646-1.227 1.033-.453.388-.776.776-1.164 1.228-.323.388-.71.84-.969 1.293-.323.452-.646.904-.905 1.357-.258.517-.452.969-.71 1.486-.194.517-.388.97-.517 1.486a20.921 20.921 0 0 0-.453 1.616c-.064.258-.064.581-.129.84-.065.258-.065.517-.129.775 0 .517-.065 1.099-.065 1.616 0 .387 0 .775.065 1.163 0 .517.065 1.034.194 1.615.065.517.194 1.034.323 1.551.194.517.323 1.034.517 1.55.13.324.323.647.452.906l-14.862-5.752c-2.52-.71-4.976-1.357-7.496-1.938l-4.071-.97a119.971 119.971 0 0 0-11.76-1.744c-.13 0-.195-.065-.324-.065-3.877-.388-7.69-.581-11.567-.581-2.843 0-5.686.129-8.465.323-3.942.258-7.884.775-11.825 1.421-.97.13-1.94.323-2.908.517-2.004.388-3.942.84-5.816 1.293l-2.908.775c-.97.388-1.874.84-2.779 1.228l-2.132.97c-.13.064-.259.064-.323.128-.646.323-1.228.582-1.81.905-.193.065-.323.13-.452.194-.71.323-1.421.71-2.003 1.034-.452.194-.905.452-1.292.646-.194.13-.453.259-.582.323-.582.323-1.163.646-1.68.97-.582.322-1.099.646-1.551.969-.452.323-.905.581-1.292.904-.065.065-.13.065-.194.13-.388.258-.84.581-1.228.904l-.13.13-.968.775c-.13.064-.26.194-.388.258-.323.259-.646.582-.97.84-.064.13-.193.194-.258.259-.388.388-.775.71-1.163 1.098-.065 0-.065.065-.13.13-.387.323-.775.71-1.163 1.098-.064.065-.064.13-.129.13a15.16 15.16 0 0 0-.969 1.033c-.13.13-.323.259-.452.388-.323.388-.711.775-1.099 1.163-.065.13-.194.194-.258.323-.517.517-.97 1.034-1.487 1.551l-.193.194c-1.034 1.098-2.133 2.197-3.296 3.166a36.732 36.732 0 0 1-3.619 2.843 48.856 48.856 0 0 1-3.877 2.456 39.382 39.382 0 0 1-4.071 1.939 46.55 46.55 0 0 1-4.2 1.55c-2.714.582-5.493 1.68-7.884 1.874-.517 0-1.098.13-1.615.194-.582.13-1.099.259-1.616.388l-1.55.582c-.518.193-1.035.452-1.552.71-.452.323-.969.582-1.421.905-.453.323-.905.71-1.293 1.099-.452.323-.904.775-1.292 1.163-.388.452-.775.84-1.099 1.292-.323.517-.71.97-.969 1.486-.323.453-.646.97-.904 1.487-.26.581-.517 1.098-.711 1.68a49.803 49.803 0 0 0-.582 1.68c-.129.517-.258 1.034-.323 1.55 0 .066-.065.13-.065.195-.129.581-.129 1.357-.194 1.744-.064.453-.129.84-.129 1.293 0 .258 0 .581.065.84.065.452.13.84.259 1.228.129.387.258.775.452 1.163v.064c.194.388.452.776.71 1.164.26.387.518.775.84 1.163.324.323.712.71 1.1 1.034.387.387.775.71 1.227 1.034 1.551 1.357 1.939 1.809 3.942 2.843.323.194.646.323 1.034.517.065 0 .129.064.194.064 0 .13 0 .194.064.324.065.517.194 1.034.324 1.55a8.71 8.71 0 0 0 .516 1.551c.194.388.324.776.517 1.164.065.129.13.258.194.323.259.517.517.969.776 1.421l.969 1.357c.323.388.71.84 1.099 1.228.387.388.775.71 1.227 1.099 0 0 .065.064.13.064.387.323.775.647 1.163.905.452.323.904.582 1.421.84.453.259.97.517 1.487.71.387.195.84.324 1.292.453.065.065.129.065.258.13.26.064.582.129.84.193-.193 3.49-.258 6.785.26 7.948.58 1.293 3.424-2.649 6.267-7.172-.388 4.458-.646 9.693 0 11.243.711 1.616 4.588-3.424 7.948-8.982C88.397 104.336 130.206 136 134.6 180.716c-.84-6.979-9.435-10.856-13.377-9.887-1.938 4.782-5.234 10.921-10.533 14.734a41.434 41.434 0 0 0-.646-12.924c-1.421 5.945-4.2 11.502-8.013 16.284-6.138.452-12.277-2.52-15.508-6.98-.259-.193-.323-.58-.517-.84-.194-.452-.388-.904-.517-1.356a5.365 5.365 0 0 1-.388-1.357c-.065-.453-.065-.905-.065-1.422v-.97c.065-.452.194-.904.323-1.356.13-.453.259-.905.453-1.357.258-.453.452-.905.775-1.357 1.099-3.102 1.099-5.622-.904-7.108a7.36 7.36 0 0 0-1.228-.647c-.259-.064-.582-.193-.84-.258-.194-.065-.323-.13-.517-.194-.453-.13-.905-.259-1.357-.323a4.923 4.923 0 0 0-1.357-.194c-.453-.065-.97-.13-1.422-.13-.323 0-.646.066-.97.066-.516 0-.968.064-1.42.193-.453.065-.905.13-1.358.259-.452.13-.905.259-1.357.452-.452.194-.84.388-1.292.582-.388.194-.776.452-1.228.646-15.056 9.822-6.074 32.827 4.2 39.483-3.877.71-7.819 1.55-8.917 2.39l-.13.13c2.78 1.68 5.687 3.102 8.724 4.33 4.136 1.356 8.53 2.584 10.469 3.101v.065a62.516 62.516 0 0 0 16.284 1.163c28.626-2.003 52.083-23.78 56.348-52.471.13.581.259 1.098.388 1.68.194 1.163.452 2.39.581 3.619v.064c.13.582.194 1.164.259 1.68v.26c.065.58.13 1.162.13 1.68.064.71.128 1.42.128 2.132v1.034c0 .323.065.71.065 1.033 0 .388-.065.776-.065 1.164v.904c0 .453-.065.84-.065 1.293 0 .258 0 .517-.064.84 0 .452-.065.904-.065 1.421-.065.194-.065.388-.065.582-.064.517-.129.97-.194 1.486 0 .194 0 .388-.064.582-.065.646-.194 1.228-.259 1.874v.129c-.129.582-.258 1.228-.388 1.81v.193l-.387 1.745c0 .065-.065.194-.065.259-.13.581-.259 1.163-.452 1.744v.194c-.194.647-.388 1.228-.517 1.81-.065.064-.065.129-.065.129l-.582 1.938c-.258.647-.452 1.228-.71 1.874-.259.647-.453 1.293-.711 1.874-.259.647-.517 1.228-.776 1.874h-.064c-.26.582-.517 1.228-.84 1.81-.065.194-.13.323-.194.452-.065.065-.065.13-.13.194-4.2 8.465-10.403 15.896-18.158 21.712-.517.323-1.034.71-1.55 1.099-.13.129-.324.193-.453.323-.452.323-.905.646-1.421.969l.193.388h.065l2.714-.388h.065c1.68-.259 3.36-.582 5.04-.905.452-.065.97-.194 1.422-.323.323-.065.581-.129.904-.194.453-.064.905-.194 1.357-.258.388-.13.776-.194 1.164-.323 6.462-1.551 12.73-3.684 18.74-6.204-10.275 14.023-24.04 25.331-40.13 32.762 7.432-.517 14.863-1.744 22.036-3.812 26.042-7.69 47.948-25.202 61.065-48.788a103.145 103.145 0 0 1-17.382 41.55 101.732 101.732 0 0 0 17.253-14.345c14.475-15.121 23.974-34.313 27.205-54.927a102.9 102.9 0 0 1 1.874 31.147c46.655-65.072 3.877-132.535-14.023-150.305-.064-.13-.129-.194-.129-.323-.064.064-.064.064-.064.129 0-.065 0-.065-.065-.13 0 .776-.065 1.551-.13 2.327-.193 1.486-.387 2.908-.646 4.33-.323 1.421-.71 2.843-1.098 4.264a53.747 53.747 0 0 1-1.55 4.136 55.49 55.49 0 0 1-1.94 3.942c-.71 1.227-1.486 2.52-2.326 3.683a49.368 49.368 0 0 1-2.65 3.49c-.969 1.163-2.002 2.197-3.036 3.23a41.646 41.646 0 0 1-1.874 1.616c-.517.452-.97.84-1.487 1.292-1.163.905-2.326 1.745-3.618 2.52-1.228.776-2.52 1.551-3.813 2.198-1.357.646-2.714 1.227-4.07 1.809-1.358.517-2.78.97-4.201 1.357a52.05 52.05 0 0 1-4.33.97c-1.486.258-2.972.387-4.394.516-1.034.065-2.068.13-3.102.13-1.486 0-2.972-.13-4.394-.26-1.486-.128-2.972-.322-4.394-.645-1.486-.26-2.908-.647-4.33-1.099h-.064c1.422-.13 2.843-.259 4.265-.517a46.84 46.84 0 0 0 4.33-.97 45.495 45.495 0 0 0 4.2-1.356c1.421-.517 2.778-1.163 4.07-1.81 1.358-.646 2.586-1.357 3.878-2.132 1.228-.84 2.455-1.68 3.619-2.585a35.333 35.333 0 0 0 3.295-2.908c1.099-.97 2.068-2.068 3.037-3.166a63.86 63.86 0 0 0 2.714-3.49c.13-.193.259-.452.388-.646.646-1.034 1.292-2.068 1.874-3.102a44.537 44.537 0 0 0 1.939-3.941 45.28 45.28 0 0 0 1.55-4.136c.453-1.357.776-2.779 1.099-4.2.259-1.486.517-2.908.646-4.33.13-1.486.259-2.972.259-4.394 0-1.034-.065-2.068-.13-3.102-.128-1.486-.322-2.907-.516-4.33a46.844 46.844 0 0 0-.97-4.329c-.452-1.357-.904-2.778-1.421-4.135-.517-1.357-1.163-2.714-1.81-4.007-.71-1.292-1.421-2.584-2.197-3.812a71.347 71.347 0 0 0-2.584-3.554 136.72 136.72 0 0 0-2.973-3.296 40.422 40.422 0 0 0-1.68-1.615 118.979 118.979 0 0 0-8.982-6.333c-.452-.259-.84-.452-1.293-.646-2.132-1.357-4.135-2.068-6.138-2.714z"/></svg>)
diff --git a/snippets/icons/nextjs.mdx b/snippets/icons/nextjs.mdx
@@ -0,0 +1 @@
+export const NextjsIcon = () => (<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><path d="M119.617.069c-.55.05-2.302.225-3.879.35-36.36 3.278-70.419 22.894-91.99 53.044-12.012 16.764-19.694 35.78-22.597 55.922C.125 116.415 0 118.492 0 128.025c0 9.533.125 11.61 1.151 18.64 6.957 48.065 41.165 88.449 87.56 103.411 8.309 2.678 17.067 4.504 27.027 5.605 3.879.425 20.645.425 24.524 0 17.192-1.902 31.756-6.155 46.12-13.486 2.202-1.126 2.628-1.426 2.327-1.677-.2-.15-9.584-12.735-20.845-27.948l-20.47-27.648-25.65-37.956c-14.114-20.868-25.725-37.932-25.825-37.932-.1-.025-.2 16.84-.25 37.431-.076 36.055-.1 37.506-.551 38.357-.65 1.226-1.151 1.727-2.202 2.277-.801.4-1.502.475-5.28.475h-4.33l-1.15-.725a4.679 4.679 0 0 1-1.677-1.827l-.526-1.126.05-50.166.075-50.192.776-.976c.4-.525 1.251-1.2 1.852-1.526 1.026-.5 1.426-.55 5.755-.55 5.105 0 5.956.2 7.282 1.651.376.4 14.264 21.318 30.88 46.514 16.617 25.195 39.34 59.599 50.5 76.488l20.27 30.7 1.026-.675c9.084-5.905 18.693-14.312 26.3-23.07 16.191-18.59 26.626-41.258 30.13-65.428 1.026-7.031 1.151-9.108 1.151-18.64 0-9.534-.125-11.61-1.151-18.641-6.957-48.065-41.165-88.449-87.56-103.411-8.184-2.652-16.892-4.479-26.652-5.58-2.402-.25-18.943-.525-21.02-.325Zm52.401 77.414c1.201.6 2.177 1.752 2.527 2.953.2.65.25 14.562.2 45.913l-.074 44.987-7.933-12.16-7.958-12.16v-32.702c0-21.143.1-33.028.25-33.603.4-1.401 1.277-2.502 2.478-3.153 1.026-.525 1.401-.575 5.33-.575 3.704 0 4.354.05 5.18.5Z"/></svg>)