Updated remove-console example to utilize the app router. (#76543)

PapatMayuri · MayuriPapat25 · samcx · web-flow · commit aaebca93a087 · 2025-02-26T12:39:50.000-08:00
This PR updates the remove-console example for using the App Router. Here are the changes that have been made: - I renamed the pages folder and moved it to the app folder. - Added the layout.tsx file as part of the App Router. - Updated the package.json file. CC: @samcx --------- Co-authored-by: MayuriPapat25 <mayuri.papat@qed42.com> Co-authored-by: samcx <sam@vercel.com>
diff --git a/examples/remove-console/.gitignore b/examples/remove-console/.gitignore
@@ -28,6 +28,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
 .env*.local
diff --git a/examples/remove-console/README.md b/examples/remove-console/README.md
@@ -1,6 +1,6 @@
 # Remove Console Example
 
-This example shows how to use the Next.js [removeConsole](https://nextjs.org/docs/advanced-features/compiler#remove-console) config option to remove all `console.*` calls except `console.error`, or suppress all logs.
+This example shows how to use the Next.js [removeConsole](https://nextjs.org/docs/architecture/nextjs-compiler#remove-console) config option to remove all `console.*` calls except `console.error`, or suppress all logs.
 
 ## Deploy your own
 
diff --git a/examples/remove-console/app/layout.tsx b/examples/remove-console/app/layout.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Remove console",
+  description: "Next.js example remove console",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/remove-console/app/page.tsx b/examples/remove-console/app/page.tsx
@@ -0,0 +1,10 @@
+export default function Page() {
+  return (
+    <div>
+      <p>The console should be empty.</p>
+    </div>
+  );
+}
+
+console.log("log from page.tsx");
+console.error("error log from page.tsx");
diff --git a/examples/remove-console/next.config.ts b/examples/remove-console/next.config.ts
@@ -1,9 +1,7 @@
-// @ts-check
+import type { NextConfig } from "next";
 
-/**
- * @type {import('next').NextConfig}
- **/
-const nextConfig = {
+const nextConfig: NextConfig = {
+  /* config options here */
   compiler: {
     // Remove `console.*` output except `console.error`
     removeConsole: {
@@ -14,4 +12,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;
diff --git a/examples/remove-console/package.json b/examples/remove-console/package.json
@@ -7,13 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/node": "^18.11.5",
-    "@types/react": "^18.0.23",
-    "@types/react-dom": "^18.0.7",
-    "typescript": "^4.8.4"
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "typescript": "^5.7.3"
   }
 }
diff --git a/examples/remove-console/pages/index.tsx b/examples/remove-console/pages/index.tsx
diff --git a/examples/remove-console/tsconfig.json b/examples/remove-console/tsconfig.json
@@ -1,20 +1,27 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
 }
