Improve the error message when custom export fields are used in an en…

…try (#42221)

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.

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"
         }
       ]
     }

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