Next.js vs TanStack Start - Building 2 apps

The stream begins with an introduction to comparing Next.js and TanStack Start by building the same note-taking application with both frameworks. The host explains that both are full-stack React frameworks, not suitable for simple single-page applications where React Router or TanStack Router alone would suffice. Key differences are outlined: TanStack Start includes TanStack Router and can also work with Solid.js, while Next.js is React-specific. The host emphasizes that from an ecosystem perspective, Next.js has advantages due to being more mature with more tutorials, courses, and better AI model knowledge, though tools like Context7 MCP and web search can bridge this gap for TanStack Start.

The host discusses the ease of learning and mastering both frameworks, noting that Next.js is easier to get started with but harder to master due to hidden complexity around caching and directives like 'use server', 'use client', and 'use cache'. TanStack Start has a steeper initial learning curve with documentation that used to be problematic but has improved significantly. The speaker mentions their Next.js course available at academind.com and explains that TanStack Start documentation can still feel chaotic like a 'brain dump' but is much better than before. The discussion covers how Next.js caching behavior differs between development and production environments, which can be frustrating for developers.

Both projects are initialized using their respective CLI commands: 'bun create next-app' for Next.js and 'bun create @tanstack/start' for TanStack Start. The host sets up SQLite databases using Bun's built-in SQLite capabilities and attempts to configure BetterAuth for authentication in both projects. However, unexpected errors occur with TanStack Start related to BetterAuth integration, something the host hadn't encountered before despite using TanStack Start extensively in recent weeks. After troubleshooting, the decision is made to proceed without authentication to keep the stream moving forward. The host also needs to manually add Tailwind CSS to the TanStack Start project as it wasn't included by default in this particular setup.

The host sets up routing for the note-taking application in both frameworks, highlighting key differences in their routing conventions. In Next.js, routes use page.tsx files with dynamic segments wrapped in square brackets like [noteId], while TanStack Start uses index.tsx files with dollar signs for dynamic segments like $noteId. The speaker explains that TanStack Start auto-populates route files with createFileRoute code including hooks for loaders and beforeLoad functions. In Next.js, route components are React Server Components (RSC) by default, allowing direct data fetching inside components, whereas TanStack Start uses a loader pattern where data fetching must happen in designated loader functions that run on both server and client.

The host demonstrates the fundamental difference in data fetching between the frameworks. TanStack Start uses createServerFunction to wrap database code, ensuring it only runs server-side even when called from loaders that execute on both client and server. This is paired with Zod validation schemas passed to inputValidator for automatic validation. Next.js uses React Server Components, allowing developers to write database queries directly in component bodies since components are guaranteed to run only on the server. For mutations, Next.js uses React server actions with 'use server' directive, while TanStack Start uses its own server functions wrapped with useServerFunction hook when called from components. The host uses AI (Cursor with Claude Opus) to help implement these patterns, providing context from official documentation.

The stream proceeds to integrate Tiptap, a rich text editor library, into both applications. Tiptap provides a WYSIWYG editing experience while outputting JSON that can be stored in the database and rendered programmatically. The host installs @tiptap/react, @tiptap/pm, and @tiptap/starter-kit packages in both projects, then uses AI to set up the editor components with features like bold, italic, strikethrough, headings, and code blocks. In Next.js, the Tiptap component must be marked with 'use client' since it uses hooks and handles user interaction. The editor is configured with immediatelyRender: false for proper server-side rendering compatibility. The host demonstrates saving notes with formatted content including headings, bold text, inline code, and code blocks in both applications.

The final segment covers saving and displaying notes in both frameworks. The host implements save functionality using server functions in TanStack Start with Zod validation and throw redirect for navigation, and React server actions with useActionState hook in Next.js for handling form submissions with validation errors. Notes are stored as JSON in SQLite and retrieved for the detail pages. AI helps create custom renderers to display the Tiptap JSON content as properly styled JSX with Tailwind classes. The host addresses questions about deployment, explaining that SQLite likely won't work on Vercel due to serverless function architecture lacking persistent file storage. The stream concludes with working note-taking applications in both frameworks, emphasizing that while Next.js offers more ecosystem support and maturity, TanStack Start provides a simpler mental model without complex caching directives.