Squadbase supports Next.js, the React-based full-stack web application framework. This article explains how to leverage Squadbase features with Next.js.

Why Next.js is Chosen for AI App Development

Next.js is a well-known React full-stack framework enabling developers to handle both frontend and backend within a single framework.

Next.js integrates server-side development using Node.js runtime, allowing requests to LLM APIs and multi-step workflows based on agent architectures to be combined seamlessly into one codebase alongside the UI rendering. This integration makes Next.js popular for AI application development.

AI SDK by Vercel

AI SDK by Vercel leverages these strengths, providing a toolkit for AI app development. It manages connections to multiple LLM providers like OpenAI, Anthropic, and Google through a unified interface. It also offers React hooks for various frontend logic patterns used in AI apps.

Notably, the AI SDK simplifies handling challenging streaming processes for both server-side and client-side implementations.

Compared to the popular Python-based framework Streamlit, Next.js excels in creating rich frontend interactions.

Why Next.js and Squadbase Are the Perfect Fit

Vercel is typically the primary hosting environment for Next.js due to its excellent developer experience and high-performance infrastructure. However, Vercel may not always be ideal, especially when restricting public access and providing app access only to specific organizational users.

User Authentication and Access Control

When deploying Next.js apps internally, user authentication and RBAC are essential. Implementing authentication typically involves configuring identity providers and integrating them with Next.js. When managing multiple apps with various role configurations, identity provider setups can become complex, requiring the development of additional user management databases.

Squadbase enables user authentication without additional code, allowing easy user-role management per app directly from the dashboard.

Operational Support

Operational features such as collecting access and runtime logs, monitoring, and building user-reporting channels are crucial for managing business applications. Squadbase provides these essential features as part of its platform.

Squadbase offers an experience akin to Vercel but specializes in organizational application functionalities.

Using Squadbase Features with Next.js

User Authentication

When team members access apps deployed on Squadbase, user authentication happens automatically. For non-public apps, only authenticated users can access them. Users can also be assigned "project roles."

Next.js code can access user information, including project roles, enabling customized app behavior based on user roles.

Code example:

import { createNextjsServerClient } from "@squadbase/nextjs";

// In your Next.js server component or API route
const client = createNextjsServerClient({
  projectId: "your-project-id",
});

// Get the current authenticated user
const user = await client.getUser();
console.log(user);
// {
//   username: string,
//   email: string,
//   firstName: string,
//   lastName: string,
//   iconUrl: string | null,
//   roles: string[]
// }

Role-Based Access Control

Each Squadbase team member can have a unique "project role" valid only within each app. Project roles are freely definable, offering flexible role management tailored to your specific needs.

Roles set can be accessed through Next.js code, as shown in the example above.

Usage Analytics

Squadbase collects user access logs, providing built-in user analytics. You can monitor how extensively team members are using the deployed Next.js apps.

No additional code is required to leverage Squadbase’s built-in analytics. Deploy your app and instantly view analytics from the dashboard.

Log Monitoring

Squadbase collects and monitors logs from deployed apps, enabling log monitoring by deployment or specific deployment versions.

Feedback

Apps deployed on Squadbase automatically include a feedback comment box. Team members can submit feedback directly from this interface.

Deploying Next.js to Squadbase

Deploying Next.js to Squadbase is straightforward! You can set up continuous deployment in four simple steps:

1. Add squadbase.yml to your project.
2. Set Next.js output mode to standalone.
3. Import your GitHub repository via the Squadbase dashboard.
4. Push your code.

For detailed instructions, see the documentation.

Conclusion

Squadbase enables seamless progression of Next.js apps from prototyping to production, providing scalability, stable operations, and continuous improvement to support organizational growth.

Deploying your Next.js app to Squadbase takes only minutes. Sign up today and give it a try!