What is "plugins": [ { "name": "next" }] that was added from pnpm dev?
#NextJS App Router - TSConfig
fringe jacinth
fading saddleBOT
Hi @fringe jacinth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The "plugins": [{ "name": "next" }] entry in your tsconfig.json's compilerOptions is used to enable the custom Next.js TypeScript plugin. This plugin provides enhanced type-checking and editor features specifically for Next.js projects using the App Router.
When you run pnpm dev (or next dev), if your project is using TypeScript, Next.js will automatically add this plugin to your tsconfig.json if it's not already present. The plugin helps with:
- Advanced type-checking and auto-completion in editors like VS Code.
- Warnings for invalid values in Next.js segment config options.
- Ensuring correct usage of the
'use client'directive and client hooks. - Providing in-context documentation and available options for Next.js features.
This is part of Next.js's built-in TypeScript support to improve the developer experience and type safety in your application. You can read more about this in the Next.js TypeScript configuration documentation and the Vercel conformance rule.
Example snippet in tsconfig.json:
{
"compilerOptions": {
"plugins": [{ "name": "next" }]
}
}
This entry is safe and recommended for all Next.js projects using TypeScript and the App Router.
Source: Next.js Docs - TypeScript Config
Source: Vercel Conformance Rule
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
fringe jacinth
@fading saddle what is the added next-env.d.ts
I get a
Do not use a triple slash reference for ./.next/types/routes.d.ts, we use 'import' style instead typescript-eslint/triple-slash-reference
fading saddleBOT
Let me check the knowledge base for you again. Give me one moment! :books:
The next-env.d.ts file is an automatically generated TypeScript declaration file in Next.js projects. Its main purpose is to ensure that Next.js types (such as PageProps, LayoutProps, and others) are globally available throughout your project. This file is created when you initialize a Next.js project (e.g., with create-next-app) and is also regenerated by commands like next dev, next build, and next typegen. It should not be manually edited, as any changes will be overwritten by Next.js processes. Instead, for custom type declarations, you should create a separate .d.ts file and include it in your tsconfig.json see docs.
About the triple-slash reference warning
Older versions of next-env.d.ts used a triple-slash reference directive like:
/// <reference path="./.next/types/routes.d.ts" />
However, if you are using ESLint with the @typescript-eslint/triple-slash-reference rule enabled, you may see a warning:
Do not use a triple slash reference for ./.next/types/routes.d.ts, we use 'import' style instead typescript-eslint/triple-slash-reference
This is because the rule discourages triple-slash references in favor of ES module import statements. Recent versions of Next.js (from 15.5.1-canary.14 and later) have switched to using an import statement in next-env.d.ts for the generated route types:
import "./.next/types/routes.d.ts";
This change was made to avoid the ESLint warning and to align with modern TypeScript best practices. If you see the triple-slash reference in your next-env.d.ts, you can safely update Next.js to a newer version, which will generate the file using the import style instead. Also, it's recommended to ignore next-env.d.ts in your ESLint config, as it is an auto-generated file see discussion.
Summary:
next-env.d.tsis auto-generated to provide global Next.js types.- Triple-slash references are being replaced by
importstatements in newer Next.js versions to avoid ESLint warnings. - Do not manually edit
next-env.d.ts; let Next.js manage it. - Ignore this file in your ESLint config to avoid unnecessary lint errors.