Issue with Importing Tuyau Schemas into Next.js

[mohitxskull]

When importing Tuyau schemas into a Next.js project, I encountered errors related to missing types and disallowed decorators. To resolve this, I added the following to my Next.js tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

And as i am directly importing .ts files i need to add this in next.config.mjs

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

export default nextConfig;

Additionally, I created a ./client/index.ts file in my backend project to export the necessary schemas:

/// <reference path="../adonisrc.ts" />
/// <reference path="../app/validators/custom/index.ts" />
/// <reference path="../config/auth.ts" />

export * from './schema.js'

I believe this approach could be documented in the Tuyau documentation to help other developers facing similar issues.

[Julien-R44]

Hey! thanks for the explanations, that’s really cool

I’m not very familiar with Next.JS, so I was wondering if you’d be interested in opening a PR? Ideally with the following things:

• An update to the docs, we could add a Next.js section explaining how to set up a Monorepo with Adonis, Next, and Tuyau
• And also, adding a ./examples/nextjs folder in the repo with a minimal example of Tuyau with Adonis and Next

That would be amazing to have

Thanks again for the explanation

[mohitxskull]

Sure, I'd be happy to do that :)

AdonisJS is a beautiful framework, I use it a lot, and I love the work of you people as I regularly dig inside the codebase of AdonisJS and the packages maintained officially by the core team and it helps me learn a lot of things.

Thank you for your work.

As for the PR

• I will be using your stackblitz repo to create a an example, will replace the vite folder with a nextjs one.
• Are you open to the idea of having a index.ts in ./adonisjs folder and referencing all the required types there rather than doing it in every project you import the api?

[Julien-R44]

Are you open to the idea of having a index.ts in ./adonisjs folder and referencing all the required types there rather than doing it in every project you import the api?

What you mean by that? You're including /// references in there ? If so, yeah, absolutely

[mohitxskull]

Like this, So we just need to simple import the routes on the client side and don't need to do any extra work.