fix: replace outdated Next.js patterns in README troubleshooting

[rainbowFi]

Summary

• Replace autoConnect: typeof window !== 'undefined' pattern with useEffect + useState in both README troubleshooting sections ("Connection limit exceeded" and "General errors")
• The useEffect approach is the recommended way to prevent server-side Ably connections in Next.js, as implemented in Improvements to Ably usage patterns ably-nextjs-fundamentals-kit#11

References: AIT-540

Test plan

• Verify code samples in README render correctly on GitHub
• Confirm no other references to autoConnect: typeof window remain in the README

🤖 Generated with Claude Code

Summary by CodeRabbit

• Documentation
  • Improved troubleshooting for connection-limit errors with browser/SSR apps, recommending initialization during browser lifecycle and gating rendering until ready.
  • Added SSR-focused examples and clarified cleanup guidance to avoid repeated reconnects during renders.
  • Fixed a heading typo and clarified best practices for client lifecycle management in React/Next.js.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a85760e1-024c-4489-bcea-3253d35a2595

📥 Commits

Reviewing files that changed from the base of the PR and between c8aa3db and d52651d.

📒 Files selected for processing (1)

• README.md

🚧 Files skipped from review as they are similar to previous changes (1)

• README.md

---

Walkthrough

README updated: removed server-side autoConnect guidance and added browser-side React examples that create Ably.Realtime inside useEffect with useState, gate rendering until the client exists, include cleanup via ably.close(), and fix a heading typo.

Changes

Documentation Update

Layer / File(s)	Summary
Connection limit / Provider example README.md	Replaces autoConnect + typeof window guidance with AblyClientProvider example that creates Ably.Realtime in useEffect, stores it in useState, returns ably.close() on cleanup, and renders <AblyProvider client={client}> only after client exists.
SSR-safe component example README.md	Adds MyComponent example showing useEffect + useState initialization, a loading placeholder while client is null, and cleanup on unmount.
Component re-renders guidance README.md	Updates guidance to avoid instantiating the client inside React component bodies and to use the useEffect + useState pattern to ensure a single client instance.
Heading typo correction README.md	Fixes heading text from “Genral errors during development” to “General errors during development”.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped through docs to stitch the seam,
useEffect wakes clients in the browser dream.
useState holds fast, cleanup says goodbye,
Connections settle softly—no SSR sky-high. 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: replacing outdated Next.js patterns (autoConnect with typeof window guard) with modern React patterns (useEffect + useState) in the README troubleshooting sections.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/nextjs-patterns-ait-540

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

README.md (2)

1-1: ⚠️ Potential issue | 🟡 Minor

Fix Prettier formatting issues.

The pipeline reports code style issues. Run the suggested command to fix formatting.

prettier --write README.md

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@README.md` at line 1, Run Prettier to fix formatting issues in README.md by
executing the suggested command (prettier --write README.md) in your local
environment or CI, then stage and commit the reformatted README.md; ensure your
commit includes only formatting changes and re-run the pipeline to verify the
style check passes.

---

259-259: ⚠️ Potential issue | 🟡 Minor

Fix typo in section header.

"Genral" should be "General".

📝 Proposed fix

-### Genral errors during development
+### General errors during development

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@README.md` at line 259, Change the section header string "### Genral errors
during development" to the correct spelling "### General errors during
development" in the README; update that exact header text to fix the typo.

🧹 Nitpick comments (1)

README.md (1)

270-289: LGTM: Correct pattern for preventing server-side connections.

This example properly handles the loading state and ensures the client is only created in the browser via useEffect. The cleanup function correctly closes the connection.

💡 Optional: Consider more generic placeholder values

Both code examples use hardcoded values like clientId: 'demo' and authUrl: '/token'. Consider using more descriptive placeholders to indicate these should be replaced:

-    const ably = new Ably.Realtime({ authUrl: '/token', authMethod: 'POST', clientId: 'demo' });
+    const ably = new Ably.Realtime({ authUrl: '/api/ably-token', authMethod: 'POST', clientId: 'your-client-id' });

This makes it clearer to developers that these values need customization.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@README.md` around lines 270 - 289, Replace the hardcoded placeholder values
in MyComponent where the Ably client is instantiated (Ably.Realtime) —
specifically the authUrl and clientId — with clearer descriptive placeholders or
variables (e.g., AUTH_TOKEN_ENDPOINT, DEFAULT_CLIENT_ID) and update any
documentation/comments to indicate these must be customized; ensure the
instantiation still uses those identifiers (authUrl and clientId) so callers
know to replace them before production.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@README.md`:
- Line 216: The conditional currently returns children when client is null,
which renders components outside the AblyProvider; update the rendering in the
component that uses the client and AblyProvider so it does not render children
unless the Ably client exists and the provider wraps them. Specifically, in the
component referencing client, replace "if (!client) return <>{children}</>;"
with one of the suggested behaviors: return null, return a loading indicator, or
otherwise withhold children until client is ready, ensuring AblyProvider wraps
children only when client is non-null (i.e., render <AblyProvider
client={client}>{children}</AblyProvider> only after client is available).

---

Outside diff comments:
In `@README.md`:
- Line 1: Run Prettier to fix formatting issues in README.md by executing the
suggested command (prettier --write README.md) in your local environment or CI,
then stage and commit the reformatted README.md; ensure your commit includes
only formatting changes and re-run the pipeline to verify the style check
passes.
- Line 259: Change the section header string "### Genral errors during
development" to the correct spelling "### General errors during development" in
the README; update that exact header text to fix the typo.

---

Nitpick comments:
In `@README.md`:
- Around line 270-289: Replace the hardcoded placeholder values in MyComponent
where the Ably client is instantiated (Ably.Realtime) — specifically the authUrl
and clientId — with clearer descriptive placeholders or variables (e.g.,
AUTH_TOKEN_ENDPOINT, DEFAULT_CLIENT_ID) and update any documentation/comments to
indicate these must be customized; ensure the instantiation still uses those
identifiers (authUrl and clientId) so callers know to replace them before
production.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 87494f6c-d0f1-41cc-b6ee-93583b2de47e

📥 Commits

Reviewing files that changed from the base of the PR and between c90f1c3 and 1a81c67.

📒 Files selected for processing (1)

• README.md

[owenpearson]

I added a commit to fix a small issue here, otherwise lgtm 👍