• Guides
• Nextjs App Configurations Turso

The Next.js App + Configurations + Turso template provides a quick start to build a Next.js application with custom configurations, App Router, and integration with a Turso Database.

This template uses Next version 13.5.6 and LibSQL 0.5.3.

To use this template, you must:

• Create a Turso account.
• Install the Turso CLI.
• Create a database with a table called posts, with the fields id and message, as explained in the next section.
• Generate your GitHub personal token.

You must also activate:

To enable them:

1. Access Azion Console > Account menu.
2. Select the Billing & Subscriptions option.
3. Select the Subscriptions tab.
4. Activate the switch for each module.

Assuming you’ve already created a Turso account and installed the Turso CLI on your computer, you’ll just need to complete the following steps using a few commands:

• Authenticate your Turso account: turso login
• Create a new database: turso db create
• List your databases: turso db list
  • You’ll obtain the LibSQL URL for your database.
• Create an authorization token to access it: turso db tokens create [your database name]
  • In this case, the name for your database should be posts.
  • Remember to save it in a secure place.
• Open the shell interface of your database: turso db shell [your database name]
• Create the table that’ll be used by this template using SQL:

CREATE TABLE posts (
  id INTEGER PRIMARY KEY,
  message varchar(140)
);
.quit

If you’ve run all the commands correctly, you’ll be able to use the URL/token during the launch process of this template.

To start using this template, access Azion Console and click the + Create button on the homepage.

This will open a modal where you can select Templates > Next.js App + Configurations + Turso card.

On the template’s page, click the Settings tab to open the configuration form and provide the information to configure your application.

Fields identified with an asterisk are mandatory.

• Application Name *: the name of your edge application on Azion.
• GitHub Personal Token *: your GitHub personal token.
• Turso Database URL *: the LibSQL URL to connect with your Turso database.
• Turso Authorization Token *: the authorization token to access your Turso database.

After completing all the information, click the Next button, located in the bottom-right corner. This will start the deployment process.

You can follow the deployment process through a window showing off the logs. When it’s complete, the deployment page appears, confirming the edge application has been successfully created.

This page shows information about the application and some options to continue your journey.

Now you can manage and adjust the settings through Azion Console.

This template deploys a basic Next.js application containing a domain to access the Single-Page Application (SPA) and demonstrate the integration under the /turso route, as well as Edge Storage configuration, cache settings, Gzip compression, and Rules Engine rules to improve the performance and delivery of static files.

It creates a new GitHub repository, including a GitHub Action to enable a continuous development workflow and keep your application up to date.

Additionally, Next.js App + Configurations creates files to implement the App Router format, including the index page, edge API routing, and Custom Route Handlers, in the new repository during the deployment.

This template also provides a basic CRUD example of how to integrate a Next.js application with a Turso Database and delivers an API route /api/posts, which enables Turso’s LibSQL SDK to connect to the database to create, read, update, and delete items.

Considering that this initial setup may not be optimal for your specific edge application, all settings can be customized any time you need through Azion Console.

To manage and edit your edge application’s settings, proceed as follows:

1. Access Azion Console > Edge Application.

• You’ll be redirected to the Edge Application page. It lists all the edge applications you’ve created.

2. Select the edge application related to this template.

• The list is organized alphabetically. You can also use the search bar located in the upper-left corner of the list; currently, it filters only by Application Name.

After selecting the edge application you’ll work on, you’ll be directed to a page containing all the settings you can configure.

Once the template is deployed, you can also edit and update your args and code, as well as implement a continuous deployment workflow. However, you’ll need first to declare secrets on your project’s GitHub repository to complete the second build with the changes. When the second build is completed, you’ll be able to manage your project with a continuous deployment workflow and edit the args as desired.

To do so, open your new [NAME] repository on GitHub. Then, go to Settings > Secrets and variables > Action to add your variables, following these instructions:

1. Add the Azion personal token to the secrets:

• Read how to generate an Azion personal token in the documentation.

    AZION_PERSONAL_TOKEN=<value>

2. Add the environments for use in the action workflow in the main.yml file, included in the .github/workflows folder of your repository:

  - name: edge-...
    id: azion_edge
    ...
    with:
        ....
        azionPersonalToken: ${{ secrets.AZION_PERSONAL_TOKEN }}
        ....

3. Open a pull request to merge the changes to the main branch and start the automatic deployment.

Now, your project is ready to work with a continuous deployment workflow, updating instantly any changes in the application or the repository.

The edge application created during the deployment has an assigned Azion domain to make it accessible through the browser. The domain has the following format: xxxxxxxxxx.map.azionedge.net/. However, you can add a custom domain for users to access your edge application through it.

Contributors