From b72dc5b69f963d91a950d8c4c4e25c1d8e84dbd4 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Tue, 1 Nov 2022 11:17:06 -0700
Subject: [PATCH] Improve the error message when custom export fields are used
 in an entry (#42221)

---
 errors/invalid-segment-export.md                    | 11 +++++++++++
 errors/manifest.json                                |  4 ++++
 packages/next/lib/typescript/diagnosticFormatter.ts |  4 ++--
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 errors/invalid-segment-export.md

diff --git a/errors/invalid-segment-export.md b/errors/invalid-segment-export.md
new file mode 100644
index 000000000000..ce27690b42c2
--- /dev/null
+++ b/errors/invalid-segment-export.md
@@ -0,0 +1,11 @@
+# Invalid Layout or Page Export
+
+#### Why This Error Occurred
+
+Your [layout](https://beta.nextjs.org/docs/api-reference/file-conventions/layout) or [page](https://beta.nextjs.org/docs/api-reference/file-conventions/page) inside the app directory exports an invalid field. In these files, you're only allowed to export a default React component, or [Segment Configuration Options](https://beta.nextjs.org/docs/api-reference/segment-config) for layout and pages, such as `revalidate`, `generateStaticParams`, etc.
+
+Other custom exports are not allowed to catch misspelt configuration options and prevent conflicts with future options.
+
+#### Possible Ways to Fix It
+
+You can create a new file and co-locate it with the page or layout. In the new file, you can export any custom fields and import it from anywhere.
diff --git a/errors/manifest.json b/errors/manifest.json
index 87e687e8cbef..5e48d7fa9d44 100644
--- a/errors/manifest.json
+++ b/errors/manifest.json
@@ -753,6 +753,10 @@
         {
           "title": "google-fonts-missing-subsets",
           "path": "/errors/google-fonts-missing-subsets.md"
+        },
+        {
+          "title": "invalid-segment-export",
+          "path": "/errors/invalid-segment-export.md"
         }
       ]
     }
diff --git a/packages/next/lib/typescript/diagnosticFormatter.ts b/packages/next/lib/typescript/diagnosticFormatter.ts
index 7ccc0c4a7f69..dd7a98e0fcf7 100644
--- a/packages/next/lib/typescript/diagnosticFormatter.ts
+++ b/packages/next/lib/typescript/diagnosticFormatter.ts
@@ -116,9 +116,9 @@ function getFormattedLayoutAndPageDiagnosticMessageText(
         if (filepathAndInvalidExport) {
           const main = `${type} "${chalk.bold(
             relativeSourceFile
-          )}" exports invalid field "${chalk.bold(
+          )}" exports an invalid "${chalk.bold(
             filepathAndInvalidExport[2]
-          )}". Only "default" and other configuration exports are allowed.`
+          )}" field. ${type} should only export a default React component and configuration options. Learn more: https://nextjs.org/docs/messages/invalid-segment-export`
           return main
         }
         break