Building a Full-Stack Next.js Application with Gibson AI

Introduction

This tutorial walks you through creating a simple to-do application using Next.js with Gibson AI as your database solution.

Setting Up Your Project

1. Clone the template repository by running:

2. Run the setup script in your terminal. When prompted, name your project (e.g., "to-do-app").

3. Configure environment variables:

   • Copy your Gibson API key from the settings section

   • Deploy your data model in Gibson to generate API endpoints

   • Get your OpenAPI specification URL from the API documentation page

Using the Gibson Client

Gibson offers multiple ways to interact with your database:

1. Using tRPC Procedures:

   • Import the Gibson client in your tRPC router

   • Create type-safe procedures with runtime validation

   • Access data using React Query hooks for loading and error states

2. Using Next.js API Routes:

   • Create custom endpoints in the /api/http directory

   • Implement validation and business logic

   • Make direct calls to the Gibson API

3. Using Server Components:

   • Create async server components with the async function syntax

   • Make direct Gibson API calls before rendering

   • Return fully rendered content without loading states

4. Using Server Actions:

   • Create server-side functions marked with "use server"

   • Call these functions from client components

   • Use React state to handle loading and updating the UI

Example: Fetching User Data

1. Create a route by adding a new directory (/demo) with a page.tsx file.

2. Import the Gibson client and create a function to fetch user data:

3. Display the data in your component with proper error and loading handling.

Remember that your API key is safe when used in server components or actions, as they execute only on the server.