Deploy a complete full-stack Next.js application in GCP.

Full-Stack Next.js Application Blueprint

This blueprint includes a Next.js frontend, Node.js backend, two Gateway connections, and a
NeonDB database for deploying production-ready full-stack web applications in GCP.

Deploy This Blueprint

About the Full-Stack Next.js Application Blueprint

This blueprint provides a complete full-stack application with separate frontend and backend services connected through a shared NeonDB database.

The included example is a Reddit-style discussion forum that demonstrates how a modern web application, REST API, and database work together in a production-ready architecture.

Use this blueprint as:

A complete full-stack web application
A starting point for Next.js projects
A foundation for SPA-driven applications
A template for modern web platforms

Full Stack Next.js Application blueprint

How the Graph Works

This blueprint combines two Gateway connections, two containers, and a NeonDB database that are already connected and configured, giving you a complete full-stack architecture that can be customized for your own applications. All components are deployed into a GCP solution with Shoal handling the cloud configuration and service wiring.

Frontend Gateway

Receives incoming web traffic and securely exposes the frontend through a public endpoint.

Frontend Container

Runs the Next.js frontend. Replace the included Next.js example with your own application.

Backend Gateway

Receives API requests and securely exposes the backend through a private and public endpoint.

Backend Container

Runs the Node.js backend and handles your APIs, application logic, and communication.

NeonDB

Stores application data in a PostgreSQL database for your frontend & backend services.

Connection

Connects the frontend to the backend using the configured API URL and environment variables.

Backend gateway, container and NeonDB graph

What You Can Build with This Blueprint

Use the Full-Stack Next.js Application blueprint to build modern web applications with separate
frontend, backend, and database services.

SaaS Applications

Deploy production-ready web apps with a dedicated API and database.

Internal Business Tools

Build dashboards, portals, and database-backed apps.

Discussion Platforms

Launch forums, discussion boards, and content-driven websites.

Customer Portals

Create authenticated dashboards and user-facing web applications.

CRUD Applications

Build applications that create, read, update, and manage data.

Full-Stack MVPs

Launch products faster with a proven deployment architecture.

Using This MCP Blueprint

Move from code to a running backend with a visual setup flow that keeps
services, connections, and deployment easier to manage.

Create a New Project

Create a new project in Shoal to get started.

Browse Blueprints

Open your environment and select Browse Blueprints to view available deployment templates.

Select the Blueprint

Choose the Full-Stack Next.js Application blueprint to automatically generate the required components and connections.

Configure the Database

Configure and select an existing database or create a new one. The DATABASE_URL environment variable will be automatically populated at container build.

Configure the API Connection

Update the NEXT_PUBLIC_API_URL environment variable so the frontend can communicate with the backend Gateway.

Customize the Application

Replace the included frontend example with your own Next.js frontend, backend APIs, or database schema.

Deploy

Click Deploy and let Shoal handle the cloud configuration, networking, and service wiring.

Access Your Application

Once deployment is complete, the frontend website and backend API are live, allowing your application to communicate with the connected database immediately.

After Deployment

Once deployed, Shoal provisions the frontend and backend endpoints and connects both services to the configured NeonDB database.

You can immediately use the included forum application or replace it with your own full-stack Next.js project while keeping the same deployment architecture.

Frontend and backend services connected to the NeonDB database