Setup Tuyau with Next.js

In this guide, we'll be setting up a Monorepo with AdonisJS, Next.js and Tuyau.

We'll be using pnpm to manage the dependencies in our Monorepo.

Let's create an empty folder called acme and initialize package.json with pnpm :

pnpm init

Now we need to tell pnpm where our apps are located in the folder and for that we need to add a apps folder and pnpm-workspace.yaml file as pnpm do not support the workspaces field in package.json:

# pnpm-workspace.yaml
packages:
    - apps/*

As a result, we'll have a acme folder with the following structure:

acme
├── package.json
├── apps
└── pnpm-workspace.yaml

Adding AdonisJS

Now let's do a cd to our apps folder and create a AdonisJS project:

pnpm create adonisjs@latest backend

For more information on creating an AdonisJS project, check out adonisjs.

acme
├── package.json
├── apps
├── apps/backend
└── pnpm-workspace.yaml

Adding Tuyau

For installation and configuration of Tuyau, check out the installation guide.

Adding Next.js

To create a Next.js project, run the following command in ./acme/apps folder:

pnpx create-next-app@latest frontend --typescript

For more information on creating a Next.js project, check out create-next-app.

acme
├── package.json
├── apps
├── apps/backend
├── apps/frontend
└── pnpm-workspace.yaml

Importing the API Definition

To import the API definition from your AdonisJS project generated by the tuyau:generate command, you must import the .adonisjs/index.ts file in your Next.js project.

For that please follow the installation guide from here.

Configuration

As we are directly importing .ts files into our Next.js project, we must configure the tsconfig.json and next.config.ts files.

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactStrictMode: true,
  transpilePackages: ['@acme/backend'],
  webpack: (config) => {
    config.resolve.extensionAlias = {
      '.js': ['.ts', '.tsx', '.js', '.jsx'],
      '.mjs': ['.mts', '.mjs'],
      '.cjs': ['.cts', '.cjs'],
    };
    return config;
  },
};

export default nextConfig;

Decorators are not enabled by default in TypeScript, So we need to enable them in tsconfig.json else we'll see errors during tsc --noEmit (typecheck).

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Testing

We have successfully created a Monorepo with AdonisJS, Next.js and Tuyau, but let's test if everything is working as expected.

For that add the typecheck script to the package.json in ./acme/apps/frontend:

// package.json
{
  "scripts": {
    "typecheck": "tsc --noEmit"
  }
}

Run the typecheck script and see if everything is working as expected.

If you see any errors coming from ../backend folder, check them and if they are related to missing types, add required reference files in the ./.adonisjs/index.ts file like this:

/// <reference path="../adonisrc.ts" />
/// <reference path="../config/auth.ts" />

export * from './api.js'

As your project grows you may need to add more reference files here.