From 599f3a0497cddb47de72269d08318bb2e9481204 Mon Sep 17 00:00:00 2001 From: Hemanshu Upadhyay Date: Fri, 2 Aug 2024 10:34:15 +0530 Subject: [PATCH] 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 --- examples/svg-components/app/layout.tsx | 16 ++++++++++++++++ .../{pages/index.tsx => app/page.tsx} | 2 ++ examples/svg-components/package.json | 12 ++++++------ examples/svg-components/tsconfig.json | 9 +++++++-- 4 files changed, 31 insertions(+), 8 deletions(-) create mode 100644 examples/svg-components/app/layout.tsx rename examples/svg-components/{pages/index.tsx => app/page.tsx} (92%) diff --git a/examples/svg-components/app/layout.tsx b/examples/svg-components/app/layout.tsx new file mode 100644 index 0000000000000..5ff842ef07b83 --- /dev/null +++ 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 ( + + {children} + + ); +} diff --git a/examples/svg-components/pages/index.tsx b/examples/svg-components/app/page.tsx similarity index 92% rename from examples/svg-components/pages/index.tsx rename to examples/svg-components/app/page.tsx index 9b7d6b615fa3a..0d4a7633b031d 100644 --- a/examples/svg-components/pages/index.tsx +++ b/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 index aba44e6cfdbf3..20a7c2aadcdf9 100644 --- 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 index 0362d9a858cd7..3c3d80d133201 100644 --- 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"] }