Merge branch 'canary' into edge-runtime

vercel · Jul 11, 2024 · 7dbb753 · 7dbb753
2 parents d33d850 + 720641a
commit 7dbb753
Show file tree

Hide file tree

Showing 31 changed files with 138 additions and 246 deletions.
diff --git a/...t-component/components/sidebar.module.css → ...ponent/app/_components/sidebar.module.css b/...t-component/components/sidebar.module.css → ...ponent/app/_components/sidebar.module.css
diff --git a/...s/layout-component/components/sidebar.tsx → ...out-component/app/_components/sidebar.tsx b/...s/layout-component/components/sidebar.tsx → ...out-component/app/_components/sidebar.tsx
diff --git a/examples/layout-component/pages/about.tsx → examples/layout-component/app/about/page.tsx b/examples/layout-component/pages/about.tsx → examples/layout-component/app/about/page.tsx
@@ -1,16 +1,11 @@
-import type { NextPageWithLayout } from "./_app";
-import Layout from "../components/layout";
-import Sidebar from "../components/sidebar";
-
-const About: NextPageWithLayout = () => {
+export default function Home() {
   return (
     <section>
       <h2>Layout Example (About)</h2>
       <p>
-        This example adds a property <code>getLayout</code> to your page,
-        allowing you to return a React component for the layout. This allows you
-        to define the layout on a per-page basis. Since we're returning a
-        function, we can have complex nested layouts if desired.
+        You can define a layout by default exporting a React component from a
+        layout.js file. The component should accept a children prop that will be
+        populated with a child layout (if it exists) or a page during rendering.
       </p>
       <p>
         When navigating between pages, we want to persist page state (input
@@ -31,15 +26,4 @@ const About: NextPageWithLayout = () => {
       </p>
     </section>
   );
-};
-
-export default About;
-
-About.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <Layout>
-      <Sidebar />
-      {page}
-    </Layout>
-  );
-};
+}
diff --git a/examples/layout-component/pages/contact.tsx → ...les/layout-component/app/contact/page.tsx b/examples/layout-component/pages/contact.tsx → ...les/layout-component/app/contact/page.tsx
@@ -1,16 +1,11 @@
-import type { NextPageWithLayout } from "./_app";
-import Layout from "../components/layout";
-import Sidebar from "../components/sidebar";
-
-const Contact: NextPageWithLayout = () => {
+export default function Home() {
   return (
     <section>
       <h2>Layout Example (Contact)</h2>
       <p>
-        This example adds a property <code>getLayout</code> to your page,
-        allowing you to return a React component for the layout. This allows you
-        to define the layout on a per-page basis. Since we're returning a
-        function, we can have complex nested layouts if desired.
+        You can define a layout by default exporting a React component from a
+        layout.js file. The component should accept a children prop that will be
+        populated with a child layout (if it exists) or a page during rendering.
       </p>
       <p>
         When navigating between pages, we want to persist page state (input
@@ -31,15 +26,4 @@ const Contact: NextPageWithLayout = () => {
       </p>
     </section>
   );
-};
-
-export default Contact;
-
-Contact.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <Layout>
-      <Sidebar />
-      {page}
-    </Layout>
-  );
-};
+}
diff --git a/...ut-component/components/layout.module.css → ...es/layout-component/app/layout.module.css b/...ut-component/components/layout.module.css → ...es/layout-component/app/layout.module.css
diff --git a/examples/layout-component/app/layout.tsx b/examples/layout-component/app/layout.tsx
@@ -0,0 +1,23 @@
+import Sidebar from "./_components/sidebar";
+import styles from "./layout.module.css";
+
+export const metadata = {
+  title: "Layouts Example",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <main className={styles.main}>
+          <Sidebar />
+          {children}
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/examples/layout-component/pages/index.tsx → examples/layout-component/app/page.tsx b/examples/layout-component/pages/index.tsx → examples/layout-component/app/page.tsx
@@ -1,16 +1,11 @@
-import type { NextPageWithLayout } from "./_app";
-import Layout from "../components/layout";
-import Sidebar from "../components/sidebar";
-
-const Index: NextPageWithLayout = () => {
+export default function Home() {
   return (
     <section>
       <h2>Layout Example (Index)</h2>
       <p>
-        This example adds a property <code>getLayout</code> to your page,
-        allowing you to return a React component for the layout. This allows you
-        to define the layout on a per-page basis. Since we're returning a
-        function, we can have complex nested layouts if desired.
+        You can define a layout by default exporting a React component from a
+        layout.js file. The component should accept a children prop that will be
+        populated with a child layout (if it exists) or a page during rendering.
       </p>
       <p>
         When navigating between pages, we want to persist page state (input
@@ -31,15 +26,4 @@ const Index: NextPageWithLayout = () => {
       </p>
     </section>
   );
-};
-
-export default Index;
-
-Index.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <Layout>
-      <Sidebar />
-      {page}
-    </Layout>
-  );
-};
+}
diff --git a/examples/layout-component/components/layout.tsx b/examples/layout-component/components/layout.tsx
diff --git a/examples/layout-component/pages/_app.tsx b/examples/layout-component/pages/_app.tsx
diff --git a/examples/redirects/README.md b/examples/redirects/README.md
@@ -2,7 +2,7 @@
 
 This example shows how to use [redirects in Next.js](https://nextjs.org/docs/api-reference/next.config.js/redirects) to redirect an incoming request path to a different destination path.
 
-The index page ([`pages/index.tsx`](pages/index.tsx)) has a list of links that match the redirects defined in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
+The index page ([`app/page.tsx`](app/page.tsx)) has a list of links that match the redirects defined in [`next.config.js`](next.config.js). Run or deploy the app to see how it works!
 
 ## Deploy your own
 

diff --git a/examples/redirects/components/Code.tsx → examples/redirects/app/_components/Code.tsx b/examples/redirects/components/Code.tsx → examples/redirects/app/_components/Code.tsx
@@ -1,4 +1,4 @@
-import styles from "../styles.module.css";
+import styles from "../../styles.module.css";
 
 type CodeProps = {
   children: React.ReactNode;

diff --git a/examples/redirects/pages/about.tsx → examples/redirects/app/about/page.tsx b/examples/redirects/pages/about.tsx → examples/redirects/app/about/page.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import styles from "../styles.module.css";
+import styles from "../../styles.module.css";
 
 export default function About() {
   return (

diff --git a/examples/redirects/app/layout.tsx b/examples/redirects/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/redirects/app/news/[...slug]/page.tsx b/examples/redirects/app/news/[...slug]/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import styles from "../../../styles.module.css";
+import Code from "../../_components/Code";
+
+export default function News({ params }: Params) {
+  const pathname = usePathname();
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1>Path: {pathname}</h1>
+        <hr className={styles.hr} />
+        <p>
+          The query <Code>slug</Code> for this page is:{" "}
+          <Code>{JSON.stringify(params.slug)}</Code>
+        </p>
+        <Link href="/">&larr; Back home</Link>
+      </div>
+    </div>
+  );
+}
+type Params = {
+  params: {
+    slug: string;
+  };
+};
diff --git a/examples/redirects/pages/index.tsx → examples/redirects/app/page.tsx b/examples/redirects/pages/index.tsx → examples/redirects/app/page.tsx
@@ -1,21 +1,21 @@
 import styles from "../styles.module.css";
 import Link from "next/link";
-import Code from "../components/Code";
+import Code from "./_components/Code";
 
-export default function Index() {
+export default function Home() {
   return (
     <div className={styles.container}>
       <div className={styles.card}>
-        <h1>Redirects with Next.js</h1>
+        <h1 className="text-white">Redirects with Next.js</h1>
         <hr className={styles.hr} />
         <p>
-          The links below are{" "}
+          The links below are custom
           <Link
             href="https://nextjs.org/docs/api-reference/next.config.js/redirects"
             legacyBehavior
           >
             <>
-              custom <Code>redirects</Code>
+              <Code>redirects</Code>
             </>
           </Link>{" "}
           that redirect an incoming request path to a different destination

diff --git a/examples/redirects/pages/news/[...slug].tsx b/examples/redirects/pages/news/[...slug].tsx
diff --git a/packages/next-swc/crates/next-custom-transforms/src/transforms/optimize_barrel.rs b/packages/next-swc/crates/next-custom-transforms/src/transforms/optimize_barrel.rs
@@ -264,8 +264,7 @@ impl Fold for OptimizeBarrel {
                     span: DUMMY_SP,
                     src: Box::new(Str {
                         span: DUMMY_SP,
-                        value: format!("__barrel_optimize__?names=__PLACEHOLDER__!=!{}", src)
-                            .into(),
+                        value: format!("__barrel_optimize__?names=__PLACEHOLDER__!=!{src}").into(),
                         raw: None,
                     }),
                     with: None,

diff --git a/packages/next-swc/crates/next-custom-transforms/src/transforms/page_config.rs b/packages/next-swc/crates/next-custom-transforms/src/transforms/page_config.rs
@@ -55,7 +55,7 @@ impl Fold for PageConfig {
                             type_ann: None,
                         }),
                         init: Some(Box::new(Expr::Lit(Lit::Str(Str {
-                            value: format!("{} {}", STRING_LITERAL_DROP_BUNDLE, timestamp).into(),
+                            value: format!("{STRING_LITERAL_DROP_BUNDLE} {timestamp}").into(),
                             span: DUMMY_SP,
                             raw: None,
                         })))),
@@ -171,8 +171,8 @@ impl Fold for PageConfig {
 impl PageConfig {
     fn handle_error(&mut self, details: &str, span: Span) {
         if self.is_page_file {
-            let message = format!("Invalid page config export found. {} \
-      See: https://nextjs.org/docs/messages/invalid-page-config", details);
+            let message = format!("Invalid page config export found. {details} \
+      See: https://nextjs.org/docs/messages/invalid-page-config");
             HANDLER.with(|handler| handler.struct_span_err(span, &message).emit());
         }
     }

diff --git a/.../next-custom-transforms/src/transforms/page_static_info/collect_exported_const_visitor.rs b/.../next-custom-transforms/src/transforms/page_static_info/collect_exported_const_visitor.rs
@@ -101,8 +101,7 @@ fn extract_value(ctx: &ExprCtx, init: &Expr, id: String) -> Option<Const> {
                     Some(elem) => {
                         if elem.spread.is_some() {
                             return Some(Const::Unsupported(format!(
-                                "Unsupported spread operator in the Array Expression at \"{}\"",
-                                id
+                                "Unsupported spread operator in the Array Expression at \"{id}\""
                             )));
                         }
 
@@ -139,21 +138,19 @@ fn extract_value(ctx: &ExprCtx, init: &Expr, id: String) -> Option<Const> {
                             PropName::Str(s) => s.value.as_ref(),
                             _ => {
                                 return Some(Const::Unsupported(format!(
-                                    "Unsupported key type in the Object Expression at \"{}\"",
-                                    id
+                                    "Unsupported key type in the Object Expression at \"{id}\""
                                 )))
                             }
                         },
                         &kv.value,
                     ),
                     _ => {
                         return Some(Const::Unsupported(format!(
-                            "Unsupported spread operator in the Object Expression at \"{}\"",
-                            id
+                            "Unsupported spread operator in the Object Expression at \"{id}\""
                         )))
                     }
                 };
-                let new_value = extract_value(ctx, value, format!("{}.{}", id, key));
+                let new_value = extract_value(ctx, value, format!("{id}.{key}"));
                 if let Some(Const::Unsupported(msg)) = new_value {
                     return Some(Const::Unsupported(msg));
                 }
@@ -169,8 +166,7 @@ fn extract_value(ctx: &ExprCtx, init: &Expr, id: String) -> Option<Const> {
             // [TODO] should we add support for `${'e'}d${'g'}'e'`?
             if !tpl.exprs.is_empty() {
                 Some(Const::Unsupported(format!(
-                    "Unsupported template literal with expressions at \"{}\".",
-                    id
+                    "Unsupported template literal with expressions at \"{id}\"."
                 )))
             } else {
                 Some(
@@ -196,15 +192,13 @@ fn extract_value(ctx: &ExprCtx, init: &Expr, id: String) -> Option<Const> {
                             ))
                         })
                         .unwrap_or(Const::Unsupported(format!(
-                            "Unsupported node type at \"{}\"",
-                            id
+                            "Unsupported node type at \"{id}\""
                         ))),
                 )
             }
         }
         _ => Some(Const::Unsupported(format!(
-            "Unsupported node type at \"{}\"",
-            id
+            "Unsupported node type at \"{id}\""
         ))),
     }
 }