Updated the Next.js quickstart guide #781
Conversation
✅ Deploy Preview for docs-novu ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -5,8 +5,9 @@ import Link from 'next/link'; | |||
| export function CreateAccountStep() { | |||
| return ( | |||
| <Step title="Create a Novu account"> | |||
| If you don't have a Novu account, you can create one{' '} | |||
| <Link href="https://dashboard-v2.novu.co/auth/sign-up">here</Link>. | |||
| <Link href="https://dashboard-v2.novu.co/auth/sign-up">Create a Novu account</Link> or{' '} | |||
There was a problem hiding this comment.
@Aviatorscode2 do you think we can use the components here? instead of links? to make it feel more application type vs just redirects?
|
|
||
| <Steps> | ||
| <CreateAccountStep /> | ||
|
|
||
| <Step title="Create a new Next.js application"> | ||
| You can use the following command to create a new Next.js application, or use your own and continue from the next step. | ||
| <Step title="Create a Next.js application"> |
There was a problem hiding this comment.
| <Step title="Create a Next.js application"> | |
| <Step> | |
| ### Create a Next.js application |
if you extract the step titles like this, they will appear on the right side TOC. I think it might be helpful, wdyt?
|
|
||
| <InboxCodeBlock /> | ||
| If you’re signed in to your Novu account, then the `applicationIdentifier` and `subscriberId` are automatically entered in the code sample above. However if it’s not, here is how to access them: |
There was a problem hiding this comment.
I'm trying to see if there is anyway for us to add links to those pages from here. For now it's not really feasible.
There was a problem hiding this comment.
Take a look at this mdx component:
:tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."}
It allows having a hover state for those type of fields, wdyt? I think it can be helpful to use them to explain fields
|
|
||
| <InboxCodeBlock /> | ||
| If you’re signed in to your Novu account, then the `applicationIdentifier` and `subscriberId` are automatically entered in the code sample above. However if it’s not, here is how to access them: | ||
| 1. `applicationIdentifier` – In the Novu dashboard, click API Keys, and then locate your unique Application Identifier. | ||
| 2. `subscriberId` – In the Novu dashboard, click Subscribers, and then locate the `subscriberId`. |
There was a problem hiding this comment.
I'm not sure about this section still,
IT's better to explain: A subscriberId represents a user in your system, usually this should be the userId from your database uniquely identifying a user.
For testing purposes we will use a test value connected to your users on the dashboard,....
(something in this spirit)
| <div className="rounded-lg border-l-4 border-yellow-500 bg-yellow-50 p-4 dark:bg-yellow-950"> | ||
| <div className="text-sm text-yellow-700 dark:text-yellow-400"> | ||
| <p>**Note:** If you pass a `subscriberId` that does not exist yet, Novu will automatically create a new subscriber with that ID.</p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Let's use the <Callout mdx component for those types of things
| <TriggerNotificationStep /> | ||
| <Step title="Trigger your first notification"> | ||
| In this step, you'll create a simple workflow to send your first notification via the Inbox component. Follow these steps to set up and trigger a workflow from your Novu dashboard. | ||
| 1. Go to your Novu dashboard. |
There was a problem hiding this comment.
Let's make Novu Dashboard a link
| In this step, you'll create a simple workflow to send your first notification via the Inbox component. Follow these steps to set up and trigger a workflow from your Novu dashboard. | ||
| 1. Go to your Novu dashboard. | ||
| 2. In the sidebar, click **Workflows**. | ||
| 3. Click **reate Workflow**. Enter a name for your workflow (e.g., "Welcome Notification"). |
There was a problem hiding this comment.
| 3. Click **reate Workflow**. Enter a name for your workflow (e.g., "Welcome Notification"). | |
| 3. Click **Create Workflow**. Enter a name for your workflow (e.g., "Welcome Notification"). |
| 2. In the sidebar, click **Workflows**. | ||
| 3. Click **reate Workflow**. Enter a name for your workflow (e.g., "Welcome Notification"). | ||
| 4. Click **Create Workflow** to save it. | ||
| 5. Click the **Add Step** icon in the workflow editor and then select **n-App** as the step type. |
There was a problem hiding this comment.
| 5. Click the **Add Step** icon in the workflow editor and then select **n-App** as the step type. | |
| 5. Click the **Add Step** icon in the workflow editor and then select **In-App** as the step type. |
| Customize the look and feel of your Inbox to match your application's design. | ||
| </Card> | ||
| <Card title="Multi-tenancy" icon={<Users2 />} href="/concepts/tenants"> | ||
| <Card title="SDKs" icon={<Code2 />} href="/platform/sdks/overview"> |
There was a problem hiding this comment.
I would maybe navigate this one to the "Build Workflow" section to learn more about workflows?
No description provided.