Move Layout to _app

examples/image-component/components/code.tsx

@@ -1,8 +1,6 @@
-import { HTMLAttributes } from 'react'
+import { PropsWithChildren } from 'react'
 import styles from './code.module.css'
 
-type CodeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
-
-export default function Code(props: CodeProps) {
+export default function Code(props: PropsWithChildren) {
   return <code className={styles.root} {...props} />
 }

examples/image-component/components/layout.tsx

@@ -1,12 +1,8 @@
-import { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
 import { useRouter } from 'next/router'
 import styles from './layout.module.css'
 
-type LayoutProps = {
-  children: ReactNode
-}
-
-export default function Layout({ children }: LayoutProps) {
+export default function Layout({ children }: PropsWithChildren) {
   const { asPath } = useRouter()
   const pagePath = `/pages/${asPath || 'index'}.tsx`
   return (

examples/image-component/pages/_app.tsx

@@ -1,6 +1,11 @@
+import '../styles/globals.css'
 import type { AppProps } from 'next/app'
-import '../styles/global.css'
+import Layout from '../components/layout'
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  )
 }

examples/image-component/pages/background.tsx

@@ -1,9 +1,8 @@
 import Image from 'next/image'
-import Layout from '../components/layout'
 
 export default function BackgroundPage() {
   return (
-    <Layout>
+    <>
       <div
         style={{
           position: 'fixed',
@@ -38,6 +37,6 @@ export default function BackgroundPage() {
         <br />
         as a Background
       </p>
-    </Layout>
+    </>
   )
 }

examples/image-component/pages/color.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image'
-import Layout from '../components/layout'
 
 // Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
 const keyStr =
@@ -18,7 +17,7 @@ const rgbDataURL = (r: number, g: number, b: number) =>
 
 export default function ColorPage() {
   return (
-    <Layout>
+    <>
       <h1>Image Component With Color Data URL</h1>
       <Image
         alt="Dog"
@@ -36,6 +35,6 @@ export default function ColorPage() {
         width={750}
         height={1000}
       />
-    </Layout>
+    </>
   )
 }

examples/image-component/pages/index.tsx

@@ -1,13 +1,12 @@
 import Image from 'next/image'
 import Link from 'next/link'
-import Layout from '../components/layout'
 import Code from '../components/code'
 import Divider from '../components/divider'
 import vercel from '../public/vercel.png'
 
 export default function IndexPage() {
   return (
-    <Layout>
+    <>
       <h1>Image Component with Next.js</h1>
       <p>
         This page demonstrates the usage of the{' '}
@@ -130,6 +129,6 @@ export default function IndexPage() {
         </a>{' '}
         to learn more.
       </p>
-    </Layout>
+    </>
   )
 }

examples/image-component/pages/layout-fill.tsx

@@ -1,10 +1,9 @@
 import Image from 'next/image'
-import Layout from '../components/layout'
 import mountains from '../public/mountains.jpg'
 
 export default function FillPage() {
   return (
-    <Layout>
+    <>
       <h1>Image Component With Layout Fill</h1>
       <div style={{ position: 'relative', width: '300px', height: '500px' }}>
         <Image
@@ -31,6 +30,6 @@ export default function FillPage() {
           quality={100}
         />
       </div>
-    </Layout>
+    </>
   )
 }

examples/image-component/pages/layout-fixed.tsx

@@ -1,10 +1,9 @@
 import Image from 'next/image'
-import Layout from '../components/layout'
 import mountains from '../public/mountains.jpg'
 
 export default function FixedPage() {
   return (
-    <Layout>
+    <>
       <h1>Image Component With Layout Fixed</h1>
       <Image
         alt="Mountains"
@@ -13,6 +12,6 @@ export default function FixedPage() {
         width={700}
         height={475}
       />
-    </Layout>
+    </>
   )
 }

examples/image-component/pages/layout-intrinsic.tsx

@@ -1,10 +1,9 @@
 import Image from 'next/image'
-import Layout from '../components/layout'
 import mountains from '../public/mountains.jpg'
 
 export default function Intrinsic() {
   return (
-    <Layout>
+    <>
       <h1>Image Component With Layout Intrinsic</h1>
       <Image
         alt="Mountains"
@@ -13,6 +12,6 @@ export default function Intrinsic() {
         width={700}
         height={475}
       />
-    </Layout>
+    </>
   )
 }

examples/image-component/pages/layout-responsive.tsx

@@ -1,10 +1,9 @@
 import Image from 'next/image'
-import Layout from '../components/layout'
 import mountains from '../public/mountains.jpg'
 
 export default function Responsive() {
   return (
-    <Layout>
+    <>
       <h1>Image Component With Layout Responsive</h1>
       <Image
         alt="Mountains"
@@ -13,6 +12,6 @@ export default function Responsive() {
         width={700}
         height={475}
       />
-    </Layout>
+    </>
   )
 }

examples/image-component/pages/placeholder.tsx

@@ -1,10 +1,9 @@
 import Image from 'next/image'
-import Layout from '../components/layout'
 import mountains from '../public/mountains.jpg'
 
 export default function PlaceholderPage() {
   return (
-    <Layout>
+    <>
       <h1>Image Component With Placeholder Blur</h1>
       <Image
         alt="Mountains"
@@ -13,6 +12,6 @@ export default function PlaceholderPage() {
         width={700}
         height={475}
       />
-    </Layout>
+    </>
   )
 }

examples/image-component/pages/shimmer.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image'
-import Layout from '../components/layout'
 
 const shimmer = (w: number, h: number) =>
   `<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -22,7 +21,7 @@ const toBase64 = (str: string) =>
 
 export default function Shimmer() {
   return (
-    <Layout>
+    <>
       <h1>Image Component With Shimmer Data URL</h1>
       <Image
         alt="Mountains"
@@ -32,6 +31,6 @@ export default function Shimmer() {
         width={700}
         height={475}
       />
-    </Layout>
+    </>
   )
 }