updated with-polyfills example to utilize the App Router. (#73425)

This PR updates the with-linaria 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: Sam Ko <sam@vercel.com>
vercel · Dec 2, 2024 · 08c74b8 · 08c74b8
1 parent d31d6dd
commit 08c74b8
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 13 deletions.
diff --git a/examples/with-polyfills/README.md b/examples/with-polyfills/README.md
@@ -1,10 +1,10 @@
 # With Polyfills
 
-Next.js supports IE11 and all modern browsers (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration. It also adds [some polyfills](https://nextjs.org/docs/basic-features/supported-browsers-features#polyfills) by default.
+Next.js supports IE11 and all modern browsers (Edge, Firefox, Chrome, Safari, Opera, et al) with no required configuration. It also adds [some polyfills](https://nextjs.org/docs/architecture/supported-browsers#polyfills) by default.
 
 If your own code or any external npm dependencies require features not supported by your target browsers, you need to add polyfills yourself.
 
-In this case, you should add a top-level import for the specific polyfill you need in your Custom `<App>` or the individual component.
+In this case, you should add a top-level import for the specific polyfill you need in your [root layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) or the individual component.
 
 ## Deploy your own
 

diff --git a/examples/with-polyfills/app/layout.tsx b/examples/with-polyfills/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+
+// Add your polyfills here or at the component level.
+// For example...
+// import 'resize-observer-polyfill'
+
+export const metadata: Metadata = {
+  title: "With Polyfills",
+  description: "Next.js example with polyfills.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/with-polyfills/pages/index.js → examples/with-polyfills/app/page.tsx b/examples/with-polyfills/pages/index.js → examples/with-polyfills/app/page.tsx
diff --git a/examples/with-polyfills/package.json b/examples/with-polyfills/package.json
@@ -7,7 +7,12 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.1",
+    "@types/react": "^18.3.12",
+    "typescript": "^5.7.2"
   }
 }
diff --git a/examples/with-polyfills/pages/_app.js b/examples/with-polyfills/pages/_app.js
diff --git a/examples/with-polyfills/tsconfig.json b/examples/with-polyfills/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "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"]
+}