AI Migration: NextJS to TanStack Start

Key Concepts

• Nex.js pages router
• TANS stack start
• Migration guide
• Server functions
• Parameterized routes
• API routes
• Middleware
• createFileRoute
• useLoaderData
• create server function

Nex.js Pages Router to TANS Stack Start Migration

Introduction

The video discusses migrating a Nex.js pages router application to a TANS stack start application. It highlights the availability of a migration guide in the TANS stack start documentation and demonstrates the conversion process using an example recipe blog application.

Cloning and Setting Up the Projects

1. Clone the original Nex.js application: The original application is cloned into a directory named "original."
   • git clone <repository_url> original
2. Create a new TANS stack start application: A new application is created in a directory named "conversion," replacing any existing TANS stack start application.
   • npx create-tanstack-start@latest recipe-blog-tanstack
3. Enable necessary features: During the creation of the TANS stack start application, features like Tanstack Form and Tanstack Query can be enabled. This ensures proper setup and reduces the need for extensive LLM configuration later.

Example Application Overview

The demo application is a recipe blog with the following features:

• Server-side rendering
• Admin interface for adding new recipes
• Form for creating new recipes (Tailwind CSS)
• Drill-down to view individual recipes
• Search functionality
• Parameterized routes
• API routes

Converting the Application with LLM

The video uses Cloud45 Sonnet to convert the Nex.js application into a TANS stack start application, utilizing the migration guide.

Comparing Homepage Implementations

The video compares the index.js files in both applications:

• Nex.js (pages router): Data (posts) is fetched using getServerSideProps and passed as props to the component.
• TANS stack start: Data is fetched using a loader function (which calls getAllPosts), and the data is accessed using useLoaderData. The output is fully typed.

Server Functions: A Key Difference

A major difference is how data loading is handled:

• Nex.js (pages router): getServerSideProps is always called on the server.
• TANS stack start: The loader function can be called on the server (initial request) or the client (SPA-style navigation).

Problem: If the loader function requires file system access (e.g., reading posts from files), it must be guaranteed to run on the server.

Solution: Use a server function.

Server Functions Explained:

• Server functions are syntactic sugar around API routes.
• They are defined using create server function.
• The compiler extracts the handler and ensures it runs only on the server.
• A stub is created that can be called on the client, making a call to the server.
• Inputs and response types are fully typed using input validators.
• The video references a Backpine video for a detailed explanation of server functions, middleware, and TANS stack start.

Example: The getAllPosts function is implemented as a server function to ensure it runs on the server and has file system access.

Parameterized Routes

• Nex.js (pages router): Uses the pages/post/[slug].js structure.
• TANS stack start: Uses the routes/post/$slug.ts structure (or similar, using dots or directories). The $ indicates a parameter.

The parameter (slug) is strongly typed and accessed via the context in the loader function. Additional context (e.g., user ID, org ID) can also be passed.

API Routes

TANS stack start offers two choices for APIs:

1. Publicly accessible API routes: Use createFileRoute
2. Server functions: Recommended for internal logic.

API Route Example (Image Upload):

• Nex.js (pages router): pages/api/upload-image.js
• TANS stack start: routes/api/upload/image.ts (or similar)

createFileRoute:

• Takes a string representing the route.
• Routes in TANS stack start are strongly typed, enabling type-safe linking using the Link tag.
• API routes are defined with a server key and handlers for specific methods (e.g., POST).
• Handlers take a request and return a response (JSON, stream, etc.).
• Components can also be included in server routes.

Post-Conversion Considerations

1. Authentication: Providers like Clerk and WorkOS work at the React level. TANS stack-specific libraries are needed for server-side integration. TANS stack start aims to provide out-of-the-box integrations for these providers.
2. Middleware: TANS stack start offers powerful middleware capabilities, including global middleware, route-specific middleware, and server function middleware. Middleware is strongly typed and can pass strongly typed context.

Conclusion

The video provides a detailed guide on migrating from Nex.js pages router to TANS stack start, emphasizing the importance of server functions, parameterized routes, and API routes. It highlights the benefits of TANS stack start, such as strong typing, server-side data loading, and powerful middleware. The video encourages viewers to explore the code, rules, and TANS stack start in their own projects.