Next.js Tutorials

Fix typescript error: Unexpected any and empty object issues

Sandipan Das
Sandipan Das · full-stack developer, Kolkata, IndiaPublished · Updated · 2 min read
Fix typescript error: Unexpected any and empty object issues — cover image

To fix typescript error messages on a new project, start here. Two ESLint errors show up on every fresh Next.js and TypeScript project: Unexpected any, and the warning that {} allows any non-nullish value. Both come from next/typescript. Here is the flat-config block that switches them off — and when you should not.

Fix typescript error: the ESLint warning that the empty object type allows any non-nullish value

Fix typescript error: the Unexpected any message from ESLint in a Next.js project

The fix: typescript error rules in eslint.config.mjs

eslint.config.mjs

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";


const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);


const compat = new FlatCompat({
  baseDirectory: __dirname,
});


const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  // = = = = = = = = = = = = = = = = = =
  // TO AVOID ERROR OF
  // Unexpected any. Specify a different type.eslint@typescript-eslint/no-explicit-any
  // AND
  // The {} ("empty object") type allows any non-nullish value, including literals like 0 and "".
  // = = = = = = = = = = = = = = = = = =
  {
    rules: {
      // Turn off `no-explicit-any`
      "@typescript-eslint/no-explicit-any": "off",


      // Allow `{}` as a valid type
      "@typescript-eslint/ban-types": [
        "error",
        {
          "types": {
            "{}": false,
          },
        },
      ],
    },
    parserOptions: {
      project: "./tsconfig.json",
      tsconfigRootDir: __dirname,
    },
  },
  // = = = = = = = = = = = = = = = = = =
  // ERROR FIXED
  // = = = = = = = = = = = = = = = = = =
];


export default eslintConfig;


What each rule was actually telling you

  • no-explicit-any — any switches off type checking for that value. The compiler stops helping you, silently.
  • The empty object type — {} does not mean "an object". It means "not null or undefined", so a string satisfies it too. Rarely what you meant.

Turning a rule off does not fix the code. It stops the editor telling you about the code. Sometimes that is the right call — but know which one you are doing.

When I actually do this

I switch these off while migrating an older codebase, when the noise drowns out real errors. That is a temporary state.

I would not start a new project this way. Change "off" to "warn" instead: you still ship, and the list of places to fix stays in your terminal. That is the setting I reach for most.

And where you would write {}, write Record<string, unknown>. It says what you meant, and the rule goes quiet on its own.

Questions

Questions this post answers

How do I fix the Unexpected any error in Next.js and TypeScript?

Both this and the empty object warning come from next/typescript, and both are switched off in a flat-config block in eslint.config.mjs. The post has the block. Read the section after it first, though — turning a rule off does not fix the code, it stops the editor telling you about the code.

What was the no-explicit-any rule actually telling me?

That any switches off type checking for that value, so the compiler stops helping you, silently. It is a warning about lost safety, not about style.

Why does the empty object type warning appear when I meant an object?

Because {} does not mean an object. It means not null or undefined, so a string satisfies it too — rarely what you meant. Where you would write {}, write Record<string, unknown> instead: it says what you meant, and the rule goes quiet on its own.

Should I switch these rules off on a new project?

I would not. I switch them off while migrating an older codebase, when the noise drowns out real errors, and that is a temporary state. On a new project change off to warn instead — you still ship, and the list of places to fix stays in your terminal.

Share:X·LinkedIn·Email

Related

  • Article

    ISR in Next.js: The Perfect SEO & Performance Strategy

    ISR in Next.js came out of a project I was working on once — a dynamic blog where content was king. It had great design, engaging posts, and an audience hungry for fresh updates. But something wasn’t right. I noticed…

    · 3 min read · by Sandipan Das
  • Next.js Tutorials

    How I Made My Next.js App Resilient After Vercel's API Fetching Time Limits

    A few months ago I was working on a Next.js project for a client, well before Vercel's API fetching time limits became my problem. Everything was going smoothly — pages were loading fast, data arrived when it was supposed to,…

    · 5 min read · by Sandipan Das
  • React Development Tips

    SHIFT + ENTER in React Quill to create a new line 100% working

    Shift + Enter in React Quill does not give you a plain line break out of the box — press Enter and you get a whole new paragraph instead. This post shows how to rebind it: disable the default Enter…

    · 3 min read · by Sandipan Das

If you'd rather not do it yourself

Everything above works. You just need the time for it.

Follow the steps and fix it yourself. Or send the site to the team and get on with your day.

900+ projects completed since 2017, from Kolkata, India.