Next.js Discord

Discord Forum

Possible ways to setup next.config.ts rather than js?

Unanswered
Griffon Nivernais posted this in #help-forum
Open in Discord
Griffon NivernaisOP
I have a config written in TS for type safety and ensuring config values exist, and want to use it in my Next config, though due to the mismatched extensions this currently isn't possible. What methods exist currently if any to convert my Next config to TS rather than JS?

22 Replies

@Ray it can only be js or mjs
Griffon NivernaisOP
No way around it until Next comes up with a method/approach?
Ray
are you using trying to do?
@Ray are you using trying to do?
Griffon NivernaisOP
Pardon?
@Griffon Nivernais Pardon?
Ray
sorry, what are you trying to do?
use the value from the ts file to set the nextconfig?
Griffon NivernaisOP
I'd like to import a TS file from my Next config which isn't possible due to the Next config being in JS.
So something like that yes
but im not sure if you could use the value
Griffon NivernaisOP
I'll give it a shot and come back to you in a bit.
Griffon NivernaisOP
@Ray So I gave it a try but maybe my use case/approach doesn't quite fit the way Jiti works, I use aliases often and tried to plug them in but using the following options I get this error:
import { fileURLToPath } from "url";

import createJiti from "jiti";

const jiti = createJiti(fileURLToPath(import.meta.url));
const config = jiti("./src/server/config", {
    alias: {
        "@/*": ["./src/*"],
        "~/*": ["./*"],
    },
    esmResolve: true,
    interopDefault: true,
});

Error: Cannot find module '@/shared/schemas'
Require stack:
- /home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/src/server/config.ts
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at /home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0_sass@1.74.1/node_modules/next/dist/server/require-hook.js:55:36
    at Function.resolve (node:internal/modules/helpers:136:19)
    at _resolve (/home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:251148)
    at jiti (/home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:253746)
    at /home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/src/server/config.ts:7:39
    at evalModule (/home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:256443)
    at jiti (/home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/dist/jiti.js:1:254371)
    at file:///home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/next.config.js:9:16
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/cyrus/Projects/PLMR/curiousaboutcare.org.uk/src/server/config.ts'
  ]
}
I'm guessing this sort of approach just doesn't work with Jiti so I'm out of luck.
for me personally, if something needs to be imported to next.config.js, i will write it in .mjs with // @ts-check and jsdoc for typing
Griffon NivernaisOP
I really didn't want to learn yet another type system when I've already learned TS in truth.
@joulev related: https://github.com/vercel/next.js/pull/63051
Griffon NivernaisOP
Have subscribed, suppose I'll need to opt for JSDoc as following [this](https://github.com/vercel/next.js/discussions/35969) was of no help unfortunately.
I have no idea why the config wasn't already converted to TS but whatever.
@Griffon Nivernais I really didn't want to learn yet another type system when I've already learned TS in truth.
joulev
it's not another type system, it's just typescript but represented in a way that a typical js runtime can run without compilation
Griffon NivernaisOP
That doesn't sound too bad, let me see what I can do.
joulev
instead of
async function fetch(request: Request, env: { APP_DOMAIN: string }): Promise<Response> {}

it becomes
/**
 * @param {Request} request
 * @param {object} env
 * @param {string} env.APP_DOMAIN
 * @returns {Promise<Response>}
 */
async function fetch(request, env) {}

that's it, still typescript