chore(examples): use default prettier for examples/templates (#60530)

## Description
This PR ensures that the default prettier config is used for examples
and templates.

This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).

## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)

## Related

- Fixes #54402
- Closes #54409

.prettierrc.json

@@ -1,4 +1,5 @@
 {
+  "trailingComma": "es5",
   "singleQuote": true,
   "semi": false
 }

examples/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "singleQuote": false,
+  "semi": true
+}

examples/active-class-name/components/ActiveLink.tsx

@@ -1,20 +1,20 @@
-import { useRouter } from 'next/router'
-import Link, { LinkProps } from 'next/link'
-import React, { PropsWithChildren, useState, useEffect } from 'react'
+import { useRouter } from "next/router";
+import Link, { LinkProps } from "next/link";
+import React, { PropsWithChildren, useState, useEffect } from "react";
 
 type ActiveLinkProps = LinkProps & {
-  className?: string
-  activeClassName: string
-}
+  className?: string;
+  activeClassName: string;
+};
 
 const ActiveLink = ({
   children,
   activeClassName,
   className,
   ...props
 }: PropsWithChildren<ActiveLinkProps>) => {
-  const { asPath, isReady } = useRouter()
-  const [computedClassName, setComputedClassName] = useState(className)
+  const { asPath, isReady } = useRouter();
+  const [computedClassName, setComputedClassName] = useState(className);
 
   useEffect(() => {
     // Check if the router fields are updated client-side
@@ -23,19 +23,19 @@ const ActiveLink = ({
       // Static route will be matched via props.href
       const linkPathname = new URL(
         (props.as || props.href) as string,
-        location.href
-      ).pathname
+        location.href,
+      ).pathname;
 
       // Using URL().pathname to get rid of query and hash
-      const activePathname = new URL(asPath, location.href).pathname
+      const activePathname = new URL(asPath, location.href).pathname;
 
       const newClassName =
         linkPathname === activePathname
           ? `${className} ${activeClassName}`.trim()
-          : className
+          : className;
 
       if (newClassName !== computedClassName) {
-        setComputedClassName(newClassName)
+        setComputedClassName(newClassName);
       }
     }
   }, [
@@ -46,13 +46,13 @@ const ActiveLink = ({
     activeClassName,
     className,
     computedClassName,
-  ])
+  ]);
 
   return (
     <Link className={computedClassName} {...props}>
       {children}
     </Link>
-  )
-}
+  );
+};
 
-export default ActiveLink
+export default ActiveLink;

examples/active-class-name/components/Nav.tsx

@@ -1,4 +1,4 @@
-import ActiveLink from './ActiveLink'
+import ActiveLink from "./ActiveLink";
 
 const Nav = () => (
   <nav>
@@ -8,7 +8,7 @@ const Nav = () => (
       }
 
       .active:after {
-        content: ' (current page)';
+        content: " (current page)";
       }
     `}</style>
     <ul className="nav">
@@ -39,6 +39,6 @@ const Nav = () => (
       </li>
     </ul>
   </nav>
-)
+);
 
-export default Nav
+export default Nav;

examples/active-class-name/next.config.js

@@ -3,9 +3,9 @@ module.exports = {
   async rewrites() {
     return [
       {
-        source: '/blog',
-        destination: '/news',
+        source: "/blog",
+        destination: "/news",
       },
-    ]
+    ];
   },
-}
+};

examples/active-class-name/pages/[slug].tsx

@@ -1,14 +1,14 @@
-import { useRouter } from 'next/router'
-import Nav from '../components/Nav'
+import { useRouter } from "next/router";
+import Nav from "../components/Nav";
 
 const SlugPage = () => {
-  const { asPath } = useRouter()
+  const { asPath } = useRouter();
   return (
     <>
       <Nav />
       <p>Hello, I'm the {asPath} page</p>
     </>
-  )
-}
+  );
+};
 
-export default SlugPage
+export default SlugPage;

examples/active-class-name/pages/about.tsx

@@ -1,10 +1,10 @@
-import Nav from '../components/Nav'
+import Nav from "../components/Nav";
 
 const AboutPage = () => (
   <>
     <Nav />
     <p>Hello, I'm the about page</p>
   </>
-)
+);
 
-export default AboutPage
+export default AboutPage;

examples/active-class-name/pages/index.tsx

@@ -1,10 +1,10 @@
-import Nav from '../components/Nav'
+import Nav from "../components/Nav";
 
 const IndexPage = () => (
   <>
     <Nav />
     <p>Hello, I'm the index page</p>
   </>
-)
+);
 
-export default IndexPage
+export default IndexPage;

examples/active-class-name/pages/news.tsx

@@ -1,10 +1,10 @@
-import Nav from '../components/Nav'
+import Nav from "../components/Nav";
 
 const News = () => (
   <>
     <Nav />
     <p>Hello, I'm the news page</p>
   </>
-)
+);
 
-export default News
+export default News;

examples/amp/additional.d.ts

@@ -3,16 +3,16 @@
 // Only the intrinsic elements defined here will be accepted, and only with the attributes defined here
 declare namespace JSX {
   interface AmpImg {
-    alt?: string
-    src?: string
-    width?: string | number
-    height?: string | number
-    layout?: string
-    fallback?: string
-    children?: React.ReactNode
+    alt?: string;
+    src?: string;
+    width?: string | number;
+    height?: string | number;
+    layout?: string;
+    fallback?: string;
+    children?: React.ReactNode;
   }
   interface IntrinsicElements {
-    'amp-img': AmpImg
+    "amp-img": AmpImg;
   }
 }
 

examples/amp/components/Byline.tsx

@@ -1,6 +1,6 @@
 type BylineProps = {
-  author: string
-}
+  author: string;
+};
 
 export default function Byline({ author }: BylineProps) {
   return (
@@ -13,5 +13,5 @@ export default function Byline({ author }: BylineProps) {
         }
       `}</style>
     </>
-  )
+  );
 }

examples/amp/components/Layout.tsx

@@ -1,6 +1,6 @@
 type LayoutProps = {
-  children?: React.ReactNode
-}
+  children?: React.ReactNode;
+};
 
 export default function Layout({ children }: LayoutProps) {
   return (
@@ -14,5 +14,5 @@ export default function Layout({ children }: LayoutProps) {
         }
       `}</style>
     </>
-  )
+  );
 }

examples/amp/pages/dog.tsx

@@ -1,13 +1,13 @@
-import Head from 'next/head'
-import { useAmp } from 'next/amp'
-import Byline from '../components/Byline'
+import Head from "next/head";
+import { useAmp } from "next/amp";
+import Byline from "../components/Byline";
 
 export const config = {
-  amp: 'hybrid',
-}
+  amp: "hybrid",
+};
 
 export default function DogPage() {
-  const isAmp = useAmp()
+  const isAmp = useAmp();
 
   return (
     <div>
@@ -17,14 +17,14 @@ export default function DogPage() {
       <h1>The Dog (Hybrid AMP Page)</h1>
       <Byline author="Meow Meow Fuzzyface" />
       <p>
-        <a href={isAmp ? '/dog' : '/dog?amp=1'}>
-          {isAmp ? 'View Non-AMP' : 'View AMP'} Version
+        <a href={isAmp ? "/dog" : "/dog?amp=1"}>
+          {isAmp ? "View Non-AMP" : "View AMP"} Version
         </a>
       </p>
       <p className="caption">Woooooooooooof</p>
       <p>
-        Wafer donut candy soufflé{' '}
-        <a href={isAmp ? '/?amp=1' : '/'}>lemon drops</a> icing. Marzipan gummi
+        Wafer donut candy soufflé{" "}
+        <a href={isAmp ? "/?amp=1" : "/"}>lemon drops</a> icing. Marzipan gummi
         bears pie danish lollipop pudding powder gummi bears sweet. Pie sweet
         roll sweet roll topping chocolate bar dragée pudding chocolate cake.
         Croissant sweet chocolate bar cheesecake candy canes. Tootsie roll icing
@@ -90,5 +90,5 @@ export default function DogPage() {
         tiramisu.
       </p>
     </div>
-  )
+  );
 }

examples/amp/pages/index.tsx

@@ -1,14 +1,14 @@
-import Head from 'next/head'
-import { useAmp } from 'next/amp'
-import Layout from '../components/Layout'
-import Byline from '../components/Byline'
+import Head from "next/head";
+import { useAmp } from "next/amp";
+import Layout from "../components/Layout";
+import Byline from "../components/Byline";
 
 export const config = {
   amp: true,
-}
+};
 
 export default function IndexPage() {
-  const isAmp = useAmp()
+  const isAmp = useAmp();
 
   return (
     <Layout>
@@ -35,7 +35,7 @@ export default function IndexPage() {
         ></amp-img>
       </amp-img>
       <p>
-        Cat ipsum dolor <a href={isAmp ? '/dog?amp=1' : '/dog'}>sit amet</a>,
+        Cat ipsum dolor <a href={isAmp ? "/dog?amp=1" : "/dog"}>sit amet</a>,
         eat grass, throw it back up but refuse to leave cardboard box or groom
         yourself 4 hours - checked, have your beauty sleep 18 hours - checked,
         be fabulous for the rest of the day - checked!. Hide from vacuum
@@ -233,5 +233,5 @@ export default function IndexPage() {
         }
       `}</style>
     </Layout>
-  )
+  );
 }

examples/amp/pages/normal.tsx

@@ -1,3 +1,3 @@
 export default function NormalPage() {
-  return <p>I'm just a normal old page, no AMP for me</p>
+  return <p>I'm just a normal old page, no AMP for me</p>;
 }

examples/analyze-bundles/next.config.js

@@ -1,10 +1,10 @@
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // any configs you need
-}
+};
 
-module.exports = withBundleAnalyzer(nextConfig)
+module.exports = withBundleAnalyzer(nextConfig);

examples/analyze-bundles/pages/about.tsx

@@ -1,5 +1,5 @@
 const About = () => {
-  return <div>About us</div>
-}
+  return <div>About us</div>;
+};
 
-export default About
+export default About;

examples/analyze-bundles/pages/contact.tsx

@@ -1,5 +1,5 @@
 const Contact = () => {
-  return <div>This is the contact page.</div>
-}
+  return <div>This is the contact page.</div>;
+};
 
-export default Contact
+export default Contact;