Next.js
This example assumes you have already created your own Territory. If you have not, please refer to this guide.
In this tutorial we will be deploying our example application to CitadelHosts. We will upload the images that define our application to our Smart Image Registry. Then we will define our custom application in CitadelHosts. Finally, we will deploy that application to our own Territory instance.
Our Example Application
This application is intended to highlight some of the powerful features that the Next.js framework gives you. The demo utilizes Dynamic Routing, Server Actions, Component Architecture, and API Routes. These features are all demoed and able to be deployed right here on CitadelHosts.
The application is available on GitHub at: https://github.com/LiamJFitzpatrick/citadel-nextjs-example.
Uploading Custom Images To Your Smart Registry
The example application contains a Dockerfile. These files define everything that our application needs to run. For our example, we have walkthroughs for deploying using GitHub Actions to build and upload your images or you can follow along the guide to build and deploy your images from your local machine using Docker.
Using GitHub Actions
An example deploy workflow is provided below. This will build the necessary images and upload them to your CitadelHosts account. You can clone the example repository and then push the code to your own GitHub repository. Whenever changes are pushed to your GitHub repository they will be automatically sent to your CitadelHosts registry. This is great to be able to enable automatic deployments.
.github/workflows/deploy.yml
name: Build and Push Container Images
on:
push:
branches:
- develop
- main
- master
tags:
- 'v*'
env:
REGISTRY: registry.citadelhosts.com
IMAGE_NAME: ${{ secrets.IMAGE_NAME }}
jobs:
build-and-push:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Log in to private registry
uses: docker/login-action@v3
with:
registry: ${{ env.REGISTRY }}
username: ${{ secrets.REGISTRY_USERNAME }}
password: ${{ secrets.REGISTRY_PASSWORD }}
- name: Extract metadata
id: next-meta
uses: docker/metadata-action@v5
with:
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
tags: |
type=ref,event=branch
type=ref,event=pr
type=semver,pattern={{version}}
type=semver,pattern={{major}}.{{minor}}
type=sha
- name: Build and push app image
uses: docker/build-push-action@v6
with:
context: .
file: ./Dockerfile
push: true
tags: ${{ steps.next-meta.outputs.tags }}
labels: ${{ steps.next-meta.outputs.labels }}
cache-from: type=gha
cache-to: type=gha,mode=max
This deploy workflow requires the following secrets in your repository:
- IMAGE_NAME: This is the name that image will have in your CitadelHosts registry.
- REGISTRY_USERNAME: This is your CitadelHosts username.
- REGISTRY_PASSWORD: This is your CitadelHosts password.
Using Docker CLI
Getting and Building The Application
After you have cloned the repository, navigate into the newly created folder.
git clone https://github.com/LiamJFitzpatrick/citadel-nextjs-example.git
cd citadel-nextjs-example
Build the Next.js image.
docker build -t registry.citadelhosts.com/nextjs-example:latest -f Dockerfile ./
Authenticate your Docker CLI with the CitadelHosts.com Smart Image Registry. You will login using the same credentials you use to login to CitadelHosts.com.
docker login registry.citadelhosts.com
Push your newly built images to your registry.
docker push registry.citadelhosts.com/nextjs-example:latest
Congrats! You have successfully uploaded the example application to your CitadelHosts account!
Defining Custom Applications
To define a custom application navigate to the Apps page and scroll down to the Create Application section (or click this link: https://citadelhosts.com/dashboard/apps#create-application).
This form allows you to define custom application configurations.
Step 1: Application Definition
The first step is to define the application. The table below shows suggested input values for our example.
| Label | Value | Description |
|---|---|---|
| Name | Next.js Example | This is the name of your application and will appear in your App Library |
| Description | An example Next.js app, highlighting some of the great features of Next.js. | A description for your custom application. |
Step 2: Container Definition
The second step is to define the containers that will make up our application. Our example application consists of 1 container, so you can hit Add Container for 1 container. The suggested inputs are summarized in the tables below.
Container 1 Definition: Flask Backend
| Label | Value |
|---|---|
| Name: | next |
| Start Order: | 0 |
| Image: | nextjs-example:latest |
Step 3: Container Configuration
The final step in defining your custom application is going to be to configure ports, volumes, and environment variables for each of the containers that make up your application. The necessary configuration for our example application is summarized in the sections below.
next Configuration
| Ports | |
|---|---|
| Container Port: | 3000 |
Finishing Up
Now that you have defined your application in the form, you just need to hit Create. You have succesfully defined your own custom Next.js application on CitadelHosts! This application is available just to your account and can be deployed to any Territory of your choosing.
Deploying Custom Applications
Deploying custom applications is just as easy as deploying pre-configured applications. All one has to do is select the Territory you would like to deploy the application on and hit Deploy! Start the app up and navigate to your access link to view your own custom application. Great work!