Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update refactors all references from "nextjs" to "next" in documentation, configuration, and playgrounds. It introduces a new, comprehensive Next.js integration guide, updates code to support optimized SSR with global client instances, adds HEAD method support to route handlers, and updates React Query usage to leverage Suspense. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant NextApp
participant orpc.server.ts (SSR)
participant orpc.ts (Client)
participant oRPC Router
Browser->>NextApp: Initial page request (SSR)
NextApp->>orpc.server.ts (SSR): Import and create global client with context from headers
orpc.server.ts (SSR)->>oRPC Router: Execute RPC call with context
oRPC Router-->>orpc.server.ts (SSR): Return data
orpc.server.ts (SSR)-->>NextApp: Provide data to render
NextApp-->>Browser: Send rendered HTML
Browser->>NextApp: Client-side navigation/RPC
NextApp->>orpc.ts (Client): Import client (uses global if available, else creates new)
orpc.ts (Client)->>oRPC Router: Execute RPC call
oRPC Router-->>orpc.ts (Client): Return data
orpc.ts (Client)-->>NextApp: Provide data to render
Possibly related PRs
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅ 📢 Thoughts on this report? Let us know! |
More templates
@orpc/arktype
@orpc/client
@orpc/contract
@orpc/nest
@orpc/openapi
@orpc/react
@orpc/openapi-client
@orpc/react-query
@orpc/server
@orpc/shared
@orpc/solid-query
@orpc/standard-server
@orpc/standard-server-fetch
@orpc/standard-server-node
@orpc/standard-server-peer
@orpc/svelte-query
@orpc/valibot
@orpc/vue-colada
@orpc/vue-query
@orpc/zod
commit: |
![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 (3)
playgrounds/next/src/app/layout.tsx (1)
1-1: Use aliased import fororpc.server.For consistency with other imports (e.g.,
@/lib/orpcin your client code), consider replacing the relative path with the path alias:- import '../lib/orpc.server' + import '@/lib/orpc.server'apps/content/.vitepress/config.ts (1)
100-100: Update sidebar integration link for Next.js.The sidebar entry link has been updated to
/docs/integrations/next, matching the renamed documentation file. If desired, you may also update the displayed text from"Next.js"to"Next"for naming consistency.apps/content/docs/integrations/next.md (1)
133-136: Grammar issue in SSR optimization introductionThere's a minor grammar error in this sentence.
-To reduce HTTP requests and improve latency during SSR, you can utilize a [Server-Side Client](/docs/client/server-side) during SSR. Below is a quick setup, see [Optimize SSR](/docs/best-practices/optimize-ssr) for a more details. +To reduce HTTP requests and improve latency during SSR, you can utilize a [Server-Side Client](/docs/client/server-side) during SSR. Below is a quick setup, see [Optimize SSR](/docs/best-practices/optimize-ssr) for more details.🧰 Tools
🪛 LanguageTool
[grammar] ~135-~135: The plural noun “details” cannot be used with the article “a”. Did you mean “a more detail” or “more details”?
Context: ...(/docs/best-practices/optimize-ssr) for a more details. ::: code-group ```ts [lib/orpc.ts] i...(A_NNS)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
playgrounds/next/public/file.svgis excluded by!**/*.svgplaygrounds/next/public/globe.svgis excluded by!**/*.svgplaygrounds/next/public/next.svgis excluded by!**/*.svgplaygrounds/next/public/vercel.svgis excluded by!**/*.svgplaygrounds/next/public/window.svgis excluded by!**/*.svgplaygrounds/next/src/app/favicon.icois excluded by!**/*.icopnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
CONTRIBUTING.md(1 hunks)apps/content/.vitepress/config.ts(1 hunks)apps/content/docs/integrations/next.md(1 hunks)apps/content/docs/integrations/nextjs.md(0 hunks)apps/content/docs/playgrounds.md(2 hunks)apps/content/public/_redirects(1 hunks)playgrounds/next/package.json(1 hunks)playgrounds/next/src/app/api/[[...rest]]/route.ts(1 hunks)playgrounds/next/src/app/layout.tsx(1 hunks)playgrounds/next/src/app/orpc-query.tsx(1 hunks)playgrounds/next/src/app/rpc/[[...rest]]/route.ts(1 hunks)playgrounds/next/src/lib/orpc.server.ts(1 hunks)playgrounds/next/src/lib/orpc.ts(2 hunks)playgrounds/next/src/playground-client.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/content/docs/integrations/nextjs.md
🧰 Additional context used
🧬 Code Graph Analysis (3)
playgrounds/next/src/app/api/[[...rest]]/route.ts (1)
playgrounds/next/src/app/rpc/[[...rest]]/route.ts (1)
HEAD(27-27)
playgrounds/next/src/app/rpc/[[...rest]]/route.ts (1)
playgrounds/next/src/app/api/[[...rest]]/route.ts (1)
HEAD(48-48)
playgrounds/next/src/lib/orpc.server.ts (1)
packages/server/src/router-client.ts (1)
createRouterClient(26-68)
🪛 LanguageTool
apps/content/docs/integrations/next.md
[grammar] ~135-~135: The plural noun “details” cannot be used with the article “a”. Did you mean “a more detail” or “more details”?
Context: ...(/docs/best-practices/optimize-ssr) for a more details. ::: code-group ```ts [lib/orpc.ts] i...
(A_NNS)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: publish-commit
- GitHub Check: lint
🔇 Additional comments (18)
apps/content/public/_redirects (2)
3-3: Add/sponsorredirect rule.This rule ensures visitors to
/sponsorare redirected to the GitHub Sponsors page. Confirm that this path is not already covered and matches the site's expected URL structure.
4-4: Redirect legacy Next.js docs path.Adds a 301 redirect from
/docs/integrations/nextjsto/docs/integrations/nextto preserve backward compatibility.playgrounds/next/src/playground-client.ts (1)
1-1: Update ORPC client import.The import now uses
clientfrom@/lib/orpcand aliases it toorpc, aligning with the refactored client export. The rest of the code correctly referencesorpc.playgrounds/next/package.json (1)
2-2: Update package name to@orpc/next-playground.Aligns the playground package name with the renamed directory and integration path. No functional impact.
CONTRIBUTING.md (1)
27-27: Path update looks goodThe path change from "nextjs" to "next" aligns with the overall renaming approach in this PR.
playgrounds/next/src/app/api/[[...rest]]/route.ts (1)
48-48: Good addition of HEAD method supportAdding support for the HEAD HTTP method improves API compatibility and follows HTTP standards. The HEAD method allows clients to request metadata without the response body.
apps/content/docs/playgrounds.md (2)
15-15: Updated Next.js playground links correctlyThe links to StackBlitz and GitHub source have been properly updated to point to the new "next" directory path.
32-32: Updated local development clone commandThe degit command now correctly references the new "next" directory path for local development setup.
playgrounds/next/src/app/rpc/[[...rest]]/route.ts (1)
27-27: Good addition of HEAD method supportAdding support for the HEAD HTTP method maintains consistency with the API route handler and follows HTTP standards. This ensures all endpoints have uniform HTTP method support.
playgrounds/next/src/app/orpc-query.tsx (1)
4-4: Good modernization using Suspense for loading statesGreat change switching from
useInfiniteQuerytouseSuspenseInfiniteQuery. This leverages React's Suspense feature to handle loading states, removing the need for manual loading state checks and simplifying the component code.Note that you've correctly kept explicit error handling in place while delegating loading state management to Suspense.
Also applies to: 7-7
playgrounds/next/src/lib/orpc.server.ts (1)
1-23: Well-implemented SSR optimization patternThis server-only module correctly sets up a global ORPC client instance for SSR optimization. The implementation:
- Properly uses the 'server only' directive
- Creates a reusable client with
createRouterClient- Provides a context function that safely retrieves headers
- Includes excellent documentation about context safety considerations
The comments are particularly valuable, clearly explaining that only globally safe context should be included since this instance is shared across all requests.
playgrounds/next/src/lib/orpc.ts (3)
8-15: Good type safety for global SSR optimizationWell-structured global type declaration that ensures TypeScript correctly understands the global client variable. The comments clearly explain the purpose of this setup and link to relevant documentation.
17-27: Clean link implementationThe link setup is clean and focused on its core responsibility without unnecessary complexity.
29-31: Elegant SSR fallback patternGreat implementation of the conditional client assignment that smoothly falls back to a client-side client when the server-side global client is not available. This pattern effectively enables the SSR optimization while maintaining compatibility across environments.
apps/content/docs/integrations/next.md (4)
1-13: Excellent introduction and overviewThis introduction provides a clear overview of oRPC integration with Next.js, covering both App Router and Pages Router approaches while linking to relevant external documentation.
14-89: Comprehensive server-side integration guidanceThe server section thoroughly covers integration with both App Router and Pages Router paradigms. The inclusion of the HEAD method handler is particularly valuable for proper HTTP protocol support. The warning about disabling the Next.js body parser for Pages Router is an important detail that could save developers significant debugging time.
90-132: Clear client-side implementation patternsGood explanation of the isomorphic function workaround needed for Next.js, with practical code examples. The global headers approach is a clean solution, and offering the alternative React Context approach shows flexibility.
137-190: Excellent SSR optimization exampleThe SSR optimization section provides a clear and practical implementation pattern that perfectly aligns with the code changes in the other files. The implementation details about context safety in a shared environment are particularly valuable, as they help prevent common pitfalls when optimizing for SSR.
1 participant
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Refactor
Style