Made minor update to the quickstart guide for React and Next.js #949
Conversation
✅ Deploy Preview for docs-novu ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughDocumentation updates refine Next.js and React quickstarts for integrating the Novu Inbox. The React guide renames the sample component and adjusts routing examples. Corresponding code templates are updated: Next.js template target path change; React template renames the exported component and updates React Router usage. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant NovuInbox
participant Router
User->>App: Open app
App->>NovuInbox: Render inbox component
NovuInbox->>Router: useNavigate(...) on interactions
Router-->>App: Route to /inbox or back
App-->>User: Updated view
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/quickstart/inbox-code.tsx (1)
129-129: Consider adding React import for consistency with other templates.While modern React doesn't strictly require importing React for JSX, some of the other templates in this file (like the Remix template on line 158) include it. For consistency across templates, consider adding the React import.
- code: `import { Inbox } from '@novu/react'; + code: `import React from 'react'; +import { Inbox } from '@novu/react';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
content/docs/platform/quickstart/nextjs.mdx(1 hunks)content/docs/platform/quickstart/react.mdx(3 hunks)src/components/quickstart/inbox-code.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
- GitHub Check: Build and Lint
🔇 Additional comments (11)
content/docs/platform/quickstart/nextjs.mdx (1)
4-4: LGTM! Description improved for clarity.The updated description is more specific and informative, clearly mentioning the App Router integration which aligns with modern Next.js best practices.
src/components/quickstart/inbox-code.tsx (3)
45-45: LGTM! File path updated to match Next.js App Router structure.The change from
components/inbox.tsxtoapp/layout.tsxcorrectly reflects the App Router file structure where the inbox should be integrated into the root layout.
127-127: LGTM! File path updated to match component rename.The path change from
src/components/notification-center.tsxtosrc/components/novu-inbox.tsxis consistent with the component rename.
132-132: LGTM! Component renamed for better clarity.The rename from
NotificationCentertoNovuInboxprovides better clarity about the component's purpose and aligns with the filename change.content/docs/platform/quickstart/react.mdx (7)
4-4: LGTM! Description improved with React Router context.The updated description is more specific and accurately describes what the guide covers, including React Router integration.
51-55: LGTM! Simplified installation instructions.Removing the React Router DOM dependency from the installation step simplifies the setup process. The routing setup is properly handled later in the guide.
61-61: LGTM! Component path updated consistently.The path change from
notification-center.tsxtonovu-inbox.tsxis consistent with the component rename and matches the template changes.
76-77: LGTM! Step title improved for clarity.The updated step title better describes what's being accomplished in this section - setting up routing and importing the component.
81-81: LGTM! Import statement updated to match component rename.The import statement correctly uses the new
NovuInboxcomponent name and updated file path.
87-87: LGTM! Component usage updated consistently.The JSX usage correctly reflects the new
NovuInboxcomponent name.
94-96: LGTM! Added Home component for routing demonstration.The addition of a simple Home component helps demonstrate how routing works with the inbox component and provides a complete working example.
@jainpawan21, kindly review and merge this.
Summary by CodeRabbit