Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: update guide for schema validation on build for Next.js 15 #282

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: update guide for schema validation on build for Next.js 15 #282

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion docs/src/app/docs/nextjs/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,22 @@ export const env = createEnv({

### Validate schema on build (recommended)

We recommend you importing your newly created file in your `next.config.js`. This will make sure your environment variables are validated at build time which will save you a lot of time and headaches down the road. You can use [unjs/jiti](https://github.com/unjs/jiti) to import TypeScript files in your `next.config.js`:
We recommend you importing your newly created file in your `next.config.ts`. This will make sure your environment variables are validated at build time which will save you a lot of time and headaches down the road.

```ts title="next.config.ts"
import type { NextConfig } from "next";

// Import env here to validate during build.
import "./app/env";

const nextConfig: NextConfig = {
/** ... */
};
```

<Callout type="info">

If you’re using Next.js version 14 or below, you can use [unjs/jiti](https://github.com/unjs/jiti) to import TypeScript files in your `next.config.js`:
Comment on lines +110 to +125
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we should have this it should alos come with a warning about the shortcomings of using esm in next.config.ts. for example import.meta.dirname etc is undefined. i recommend sticking to js config until they fix this

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@juliusmarminge is this also the case when using "type": "module" in the package.json file?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes - it's how they transpile the next.config.ts that's the problem, they call it out in their docs


```js title="next.config.js" {6}
import { fileURLToPath } from "node:url";
Expand All @@ -123,6 +138,8 @@ export default {
};
```

</Callout>

### Use your schema

Then, import the `env` object in your application and use it, taking advantage of type-safety and auto-completion:
Expand Down
Loading