Article: You're probably using Next.js wrong #2692
Conversation
WalkthroughA new blog post was added at src/routes/blog/post/using-nextjs-wrong/+page.markdoc. The file includes front-matter metadata (layout, title, description, date, cover, timeToRead, author, category, featured) and a Markdoc article covering Next.js as a full-stack framework, server components, SSR vs CSR, SEO considerations, Appwrite integration patterns (admin and session clients), authentication via server actions, route protection, guidance on when to use plain React, and links to Appwrite and Next.js docs. The document contains multiple code examples demonstrating client/server component patterns and authentication flows. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/routes/blog/post/using-nextjs-wrong/`+page.markdoc:
- Around line 77-90: The Products component destructures `{ databases }` from
createAdminClient() but the factory actually returns `{ tablesDB, account }`,
causing a runtime error; update Products to destructure `{ tablesDB }` (or
change the factory to return `databases`) and call `tablesDB.listRows(...)`
instead of `databases.listRows(...)`, and also add the missing `Query` import
(e.g., import { Query } from "appwrite") so `Query.equal()` is defined; ensure
you reference the existing createAdminClient, Products, tablesDB/databases, and
Query symbols when making the change.
- Around line 102-118: The import of cookies is currently placed alongside
createAdminClient where it isn't used; remove the unused import from the file
top and add/import cookies only where createSessionClient is defined/used so the
createAdminClient function (and its imports: Client, TablesDB, Account,
createAdminClient) shows only the dependencies it needs and createSessionClient
has the cookies import available; update the second code block to include
cookies and delete it from the first to improve clarity.
🧹 Nitpick comments (1)
src/routes/blog/post/using-nextjs-wrong/+page.markdoc (1)
146-179: Good security practices, consider adding error handling.The authentication implementation correctly uses secure cookie settings (httpOnly, secure, sameSite) and appropriate session expiration. Using the admin client for login is correct since the user isn't authenticated yet.
Consider adding error handling to provide user feedback when authentication fails, though omitting it for brevity in a tutorial is acceptable.
Optional enhancement: Add error handling
export default function LoginPage() { async function login(formData: FormData) { "use server"; try { const { account } = await createAdminClient(); const session = await account.createEmailPasswordSession( formData.get("email") as string, formData.get("password") as string ); (await cookies()).set("session", session.secret, { httpOnly: true, secure: true, sameSite: "strict", expires: new Date(session.expire), }); redirect("/"); } catch (error) { // Handle authentication errors return { error: "Invalid credentials" }; } } // ... rest of component }
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/routes/blog/post/using-nextjs-wrong/+page.markdoc
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: ebenezerdon
Repo: appwrite/website PR: 2372
File: src/routes/docs/tutorials/react/step-6/+page.markdoc:70-75
Timestamp: 2025-09-05T19:35:53.943Z
Learning: In React tutorial files, the correct Appwrite database instance to import is `tablesDB` from "../appwrite", not `databases`. The import statement should be `import { tablesDB } from "../appwrite"` to match the usage throughout the React tutorial code.
Learnt from: ebenezerdon
Repo: appwrite/website PR: 2573
File: src/lib/utils/blog-mid-cta.ts:49-60
Timestamp: 2025-11-06T19:20:26.393Z
Learning: In the appwrite/website repository's blog system, markdown headings use a custom level mapping where single `#` translates to H2 (section heading) rather than the standard H1. The regex pattern `^(?:\s{0,3})#\s+.+$/gm` is used to match these section headings correctly in `src/lib/utils/blog-mid-cta.ts`.
📚 Learning: 2025-11-06T19:20:26.393Z
Learnt from: ebenezerdon
Repo: appwrite/website PR: 2573
File: src/lib/utils/blog-mid-cta.ts:49-60
Timestamp: 2025-11-06T19:20:26.393Z
Learning: In the appwrite/website repository's blog system, markdown headings use a custom level mapping where single `#` translates to H2 (section heading) rather than the standard H1. The regex pattern `^(?:\s{0,3})#\s+.+$/gm` is used to match these section headings correctly in `src/lib/utils/blog-mid-cta.ts`.
Applied to files:
src/routes/blog/post/using-nextjs-wrong/+page.markdoc
📚 Learning: 2025-11-18T21:53:20.905Z
Learnt from: atharvadeosthale
Repo: appwrite/website PR: 2614
File: src/routes/docs/products/sites/one-click-deployment/+page.markdoc:74-122
Timestamp: 2025-11-18T21:53:20.905Z
Learning: Appwrite Sites one-click deployment supports the following framework presets: Analog (analog), Angular (angular), Next.js (nextjs), React (react), Nuxt (nuxt), Vue (vue), SvelteKit (sveltekit), Astro (astro), TanStack Start (tanstack-start), Remix (remix), Lynx (lynx), Flutter (flutter), React Native (react-native), Vite (vite), and Other (other).
Applied to files:
src/routes/blog/post/using-nextjs-wrong/+page.markdoc
⏰ 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). (3)
- GitHub Check: tests
- GitHub Check: build
- GitHub Check: assets
🔇 Additional comments (4)
src/routes/blog/post/using-nextjs-wrong/+page.markdoc (4)
122-138: LGTM!The session client factory correctly retrieves the session cookie and conditionally sets it on the client. The pattern of returning
tablesDBandaccountis consistent with the admin client factory.
183-198: LGTM!The protected layout correctly uses the session client to verify authentication and redirects unauthenticated users. The try-catch pattern appropriately handles invalid or missing sessions.
213-214: Both documentation links are valid and current.The internal link to
/docs/products/auth/server-side-renderingexists in the repository structure, and the Next.js App Router documentation linkhttps://nextjs.org/docs/appis accessible and current as of July 2025.
49-73: ReplacecollectionIdwithtableIdand add missingQueryimport.Line 60 uses the wrong parameter name:
collectionIdshould betableIdto match the Appwrite TablesDB API. Additionally, theQueryused on line 64 needs to be imported (likely from "@appwrite/client" or similar).Corrected example:
import { databases } from "@/lib/appwrite"; import { Query } from "@appwrite/client"; databases .listRows({ databaseId: DATABASE_ID, tableId: TABLE_ID, // Changed from collectionId queries: [Query.equal("status", "active")], })⛔ Skipped due to learnings
Learnt from: ebenezerdon Repo: appwrite/website PR: 2372 File: src/routes/docs/tutorials/react/step-6/+page.markdoc:70-75 Timestamp: 2025-09-05T19:35:53.943Z Learning: In React tutorial files, the correct Appwrite database instance to import is `tablesDB` from "../appwrite", not `databases`. The import statement should be `import { tablesDB } from "../appwrite"` to match the usage throughout the React tutorial code.Learnt from: ebenezerdon Repo: appwrite/website PR: 2372 File: src/routes/docs/tutorials/nuxt/step-6/+page.markdoc:79-83 Timestamp: 2025-09-05T19:35:04.162Z Learning: In Nuxt tutorial files, the correct Appwrite database instance to use is `tablesDB` (imported from "~/appwrite"), not `database`. All tablesDB method calls should use the object parameter format: listRows({ databaseId, tableId, queries }), createRow({ databaseId, tableId, rowId, data }), and deleteRow({ databaseId, tableId, rowId }).Learnt from: ebenezerdon Repo: appwrite/website PR: 2372 File: src/routes/docs/tutorials/react-native/step-6/+page.markdoc:67-73 Timestamp: 2025-09-05T19:35:59.449Z Learning: In React Native tutorials, the lib/appwrite.js file exports `tablesDB` (not `databases`), so imports should use `import { tablesDB } from "../lib/appwrite"` to match the export pattern established in step-3.Learnt from: ebenezerdon Repo: appwrite/website PR: 2372 File: src/routes/docs/tutorials/react-native/step-6/+page.markdoc:67-73 Timestamp: 2025-09-05T19:35:59.449Z Learning: In React Native tutorials, the lib/appwrite.js file exports `tablesDB` (not `databases`), so imports should use `import { tablesDB } from "../lib/appwrite"` to match the export pattern established in step-3.Learnt from: ebenezerdon Repo: appwrite/website PR: 2573 File: src/lib/utils/blog-mid-cta.ts:49-60 Timestamp: 2025-11-06T19:20:26.393Z Learning: In the appwrite/website repository's blog system, markdown headings use a custom level mapping where single `#` translates to H2 (section heading) rather than the standard H1. The regex pattern `^(?:\s{0,3})#\s+.+$/gm` is used to match these section headings correctly in `src/lib/utils/blog-mid-cta.ts`.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/routes/blog/post/using-nextjs-wrong/`+page.markdoc:
- Around line 49-73: The snippet uses Query.equal(...) inside the Products
component but never imports Query, causing a ReferenceError; add an import for
Query (e.g., import { Query } from "appwrite") at the top alongside other
imports so Query.equal is defined, and verify the import path if you have a
shared wrapper (e.g., if Query is re-exported from "@/lib/appwrite" then import
Query from there) to ensure the Query symbol is available where Products calls
Query.equal.
♻️ Duplicate comments (1)
src/routes/blog/post/using-nextjs-wrong/+page.markdoc (1)
77-90: MissingQueryimport.Same issue as the client component example—
Query.equal()is used on line 85 without importingQueryfromnode-appwrite.📝 Proposed fix
import { createAdminClient } from "@/lib/appwrite/server"; +import { Query } from "node-appwrite"; export default async function Products() {
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.