Repository: next.js
Issue: How can eslint and prettier print error on terminal or UI when I run next dev ? 
Labels: bug

### Link to the code that reproduces this issue

https://github.com/AntonioErdeljac/next13-discord-clone

### To Reproduce

1. I cloned above repository and add eslint and prettier settings
```yaml
# .eslintrc.yml
root: true
extends:
  - next/core-web-vitals
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:prettier/recommended
parser: "@typescript-eslint/parser"
parserOptions:
  project: ./tsconfig.json
plugins:
  - "@typescript-eslint"
```
```yaml
# .prettierrc.yml
endOfLine: auto
printWidth: 160
semi: false
singleQuote: false
tabWidth: 2
trailingComma: all

```
```yaml
# tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```
```js
// next.config.js
const nextConfig = {
  webpack: (config) => {
    config.externals.push({
      "utf-8-validate": "commonjs utf-8-validate",
      bufferutil: "commonjs bufferutil"
    });

    return config;
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  }
}

module.exports = nextConfig
```

2. run `next dev`
My app is shown on localhost:3000

3. NO ERROR is shown on terminal or UI
If I make a grammar mistake, its error should be shown on terminal (next dev) or UI automatically.

I know `npm run eslint` and `npm run eslint --fix` for showing error manually, but grammar error should be shown automatically if I edit and save a file.


### Current vs. Expected behavior

Current:
- No grammar error is shown on UI or terminal (next dev).
- `npm run eslint` and `npm run eslint --fix` works, but I don't want to run `npm run eslint` and `npm run eslint --fix` manually.
```
$ npm run eslint
eg. 
./lib/conversation.ts
1:1  Error: Definition for rule 'node/no-unsupported-features/es-syntax' was not found.  node/no-unsupported-features/es-syntax
4:22  Error: Replace `await·findConversation(memberOneId,·memberTwoId)·||·await·findConversation(memberTwoId,·memberOneId` with `(await·findConversation(memberOneId,·memberTwoId))·||·(await·findConversation(memberTwoId,·memberOneId)`  prettier/prettier
17:15  Error: Replace `⏎··········{·memberOneId:·memberOneId·},⏎··········{·memberTwoId:·memberTwoId·},⏎········]` with `{·memberOneId:·memberOneId·},·{·memberTwoId:·memberTwoId·}],`  prettier/prettier
26:12  Error: Insert `,`  prettier/prettier
31:12  Error: Insert `,`  prettier/prettier
32:10  Error: Insert `,`  prettier/prettier
33:8  Error: Insert `,`  prettier/prettier
51:12  Error: Insert `,`  prettier/prettier
56:12  Error: Insert `,`  prettier/prettier
57:10  Error: Insert `,`  prettier/prettier
58:8  Error: Insert `,`  prettier/prettier
...
```

Expected:
- If I make a grammar mistake and save the file, its error should be shown on terminal (next dev) or UI automatically. 

`example 1`. Expected example UI (normal react, not next js)
<img width="1127" alt="Expected example UI (normal react, not next js)" src="https://github.com/vercel/next.js/assets/84163971/5ca34b38-4190-4ede-941a-488af145ba03">
`example 2`. Expected example Terminal (normal react, not next js)
<img width="1290" alt="Expected example Terminal (normal react, not next js)" src="https://github.com/vercel/next.js/assets/84163971/f0e7d4eb-ed7b-45b2-b308-444add246a0b">


### Provide environment information

```bash
OS: MacOS M2
Frontend, Backend: next.js

# package.json
{
  "name": "discord-clone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.4",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.49.2",
    "tailwind-merge": "^2.2.0",
    "tailwindcss-animate": "^1.0.7",
    ...
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^6.16.0",
    "@typescript-eslint/parser": "^6.16.0",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.2",
    "postcss": "^8",
    "prettier": "3.1.1",
    "prisma": "^5.8.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  },
}
```
```


### Which area(s) are affected? (Select all that apply)

ESLint (eslint-config-next)

### Which stage(s) are affected? (Select all that apply)

next dev (local)

### Additional context

_No response_