Migrated svg-components to App-router (#68394)

Hello! This PR Contains the Following Changes => svg-components Example Migrated to App-Router => Added the layout.tsx file as part of the App Router. => Folder Structure Updated to support APP-Router convention => File Convention updated to Support the APP-Router convention => Npm package got updated "@svgr/webpack": "^6.2.1", to "@svgr/webpack": "^6.5.1", CC- @samcx --------- Co-authored-by: Sam Ko <sam@vercel.com>
vercel · Aug 2, 2024 · 599f3a0 · 599f3a0
1 parent 93824b9
commit 599f3a0
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 8 deletions.
diff --git a/examples/svg-components/app/layout.tsx b/examples/svg-components/app/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: "Next.js",
+  description: "Generated by Next.js",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/svg-components/pages/index.tsx → examples/svg-components/app/page.tsx b/examples/svg-components/pages/index.tsx → examples/svg-components/app/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Cat from "&/svgs/cat.svg";
 import styles from "&/styles/index.module.css";
 

diff --git a/examples/svg-components/package.json b/examples/svg-components/package.json
@@ -7,13 +7,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@svgr/webpack": "^6.2.1",
-    "@types/node": "^17.0.25",
-    "@types/react": "^18.0.6",
-    "typescript": "^4.6.3"
+    "@svgr/webpack": "^8.1.0",
+    "@types/node": "^22.0.2",
+    "@types/react": "^18.3.3",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/examples/svg-components/tsconfig.json b/examples/svg-components/tsconfig.json
@@ -17,8 +17,13 @@
     "baseUrl": ".",
     "paths": {
       "&*": [".*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }