Skip to content

feat: Next.js Pub/Sub getting-started guide#3332

Open
maratal wants to merge 9 commits intomainfrom
DX-1001-pubsub-nextjs-guide
Open

feat: Next.js Pub/Sub getting-started guide#3332
maratal wants to merge 9 commits intomainfrom
DX-1001-pubsub-nextjs-guide

Conversation

@maratal
Copy link
Copy Markdown
Collaborator

@maratal maratal commented Apr 12, 2026

Summary

  • Adds a new getting-started guide for Pub/Sub in Next.js (src/pages/docs/getting-started/nextjs.mdx)
  • Covers: connect to Ably, subscribe/publish, presence, and message history using ably/react hooks
  • Uses useEffect for Ably client creation to avoid SSR hydration mismatches in the App Router
  • Adds nextjs as a new language entry across languageData.ts, languageInfo.ts, and types.ts
  • Adds nav entry in pubsub.ts
  • Includes a screenshot of the completed example app

Test plan

  • Guide renders correctly at /docs/getting-started/nextjs
  • nextjs language selector appears and is selected by default
  • Screenshot displays correctly
  • Nav entry appears in the Pub/Sub sidebar
  • All code blocks render with correct syntax highlighting
  • CLI commands in the guide work end-to-end

🤖 Generated with Claude Code

maratal and others added 3 commits April 12, 2026 15:12
… layout

- Replace module-level client creation with useEffect to avoid SSR hydration mismatches
- Add null guard and cleanup (ably.close()) in AblyProvider
- Update Step 1 prose to reference useEffect approach
- Move ConnectionState inside ChannelProvider in Step 3 page.tsx
- Replace em dash with hyphen in PresenceStatus member status display

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 12, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: fd8ff1e5-a84a-4b36-979e-fc17e133ad3a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch DX-1001-pubsub-nextjs-guide

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@maratal maratal added the review-app Create a Heroku review app label Apr 12, 2026
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1001-pubsu-z1fi48 April 12, 2026 19:30 Inactive
@maratal maratal changed the title feat: Add Next.js Pub/Sub getting-started guide feat: Next.js Pub/Sub getting-started guide Apr 12, 2026
nextjs is not registered in @ably/ui CodeSnippet languages registry,
causing highlight.js to throw "Unknown language: nextjs" during SSR.
react works because it has a syntaxHighlighterKey mapping to javascript.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1001-pubsu-kkgpmz April 12, 2026 19:43 Inactive
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1001-pubsu-kkgpmz April 12, 2026 20:03 Inactive
… app

- Add globals.css subsection with font-size reset and box-sizing rules
- Style ConnectionState with grey pill background and bold state
- Style page.tsx with centred title and max-width container
- Style Messages with scrollable bordered box, blue left-border per message, clientId label, and Publish button
- Style PresenceStatus with grey pill, green dot indicator, and h3 heading
- Add two-column flex layout to final page.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1001-pubsu-kkgpmz April 12, 2026 21:14 Inactive
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1001-pubsu-kkgpmz April 12, 2026 21:15 Inactive
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1001-pubsu-kkgpmz April 12, 2026 22:32 Inactive
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

review-app Create a Heroku review app

Development

Successfully merging this pull request may close these issues.

2 participants