Add docs links to RSC errors (#51557)

When working with React Server Components, it's essential to have a
clear understanding of how they function and how to troubleshoot any
errors that may arise. This PR adds links to our documentation whenever
an error related to React Server Components occurs.

packages/next/src/build/webpack/plugins/wellknown-errors-plugin/parseRSC.ts

@@ -30,11 +30,11 @@ function formatRSCErrorMessage(
   if (NEXT_RSC_ERR_REACT_API.test(message)) {
     const matches = message.match(NEXT_RSC_ERR_REACT_API)
     if (matches && matches[1] === 'Component') {
-      formattedMessage = `\n\nYou’re importing a class component. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\n\n`
+      formattedMessage = `\n\nYou’re importing a class component. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials#client-components\n\n`
     } else {
       formattedMessage = message.replace(
         NEXT_RSC_ERR_REACT_API,
-        `\n\nYou're importing a component that needs $1. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\n\n`
+        `\n\nYou're importing a component that needs $1. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials\n\n`
       )
     }
     formattedVerboseMessage =
@@ -45,17 +45,17 @@ function formatRSCErrorMessage(
     switch (matches && matches[1]) {
       case 'react-dom/server':
         // If importing "react-dom/server", we should show a different error.
-        formattedMessage = `\n\nYou're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.`
+        formattedMessage = `\n\nYou're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials`
         break
       case 'next/router':
         // If importing "next/router", we should tell them to use "next/navigation".
-        formattedMessage = `\n\nYou have a Server Component that imports next/router. Use next/navigation instead.`
+        formattedMessage = `\n\nYou have a Server Component that imports next/router. Use next/navigation instead.\nLearn more: https://nextjs.org/docs/app/api-reference/functions/use-router`
         shouldAddUseClient = false
         break
       default:
         formattedMessage = message.replace(
           NEXT_RSC_ERR_SERVER_IMPORT,
-          `\n\nYou're importing a component that imports $1. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\n\n`
+          `\n\nYou're importing a component that imports $1. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials\n\n`
         )
     }
     formattedVerboseMessage = shouldAddUseClient
@@ -71,7 +71,7 @@ function formatRSCErrorMessage(
     } else {
       formattedMessage = message.replace(
         NEXT_RSC_ERR_CLIENT_IMPORT,
-        `\n\nYou're importing a component that needs $1. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.\n\n`
+        `\n\nYou're importing a component that needs $1. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials\n\n`
       )
       formattedVerboseMessage =
         '\n\nOne of these is marked as a client entry with "use client":\n'
@@ -85,7 +85,7 @@ function formatRSCErrorMessage(
   } else if (NEXT_RSC_ERR_CLIENT_DIRECTIVE_PAREN.test(message)) {
     formattedMessage = message.replace(
       NEXT_RSC_ERR_CLIENT_DIRECTIVE_PAREN,
-      `\n\n"use client" must be a directive, and placed before other expressions. Remove the parentheses and move it to the top of the file to resolve this issue.\n\n`
+      `\n\n"use client" must be a directive, and placed before other expressions. Remove the parentheses and move it to the top of the file to resolve this issue.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive\n\n`
     )
     formattedVerboseMessage = '\n\nImport path:\n'
   } else if (NEXT_RSC_ERR_INVALID_API.test(message)) {
@@ -97,7 +97,7 @@ function formatRSCErrorMessage(
   } else if (NEXT_RSC_ERR_ERROR_FILE_SERVER_COMPONENT.test(message)) {
     formattedMessage = message.replace(
       NEXT_RSC_ERR_ERROR_FILE_SERVER_COMPONENT,
-      `\n\n${fileName} must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.\n\n`
+      `\n\n${fileName} must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials#client-components\n\n`
     )
     formattedVerboseMessage = '\n\nImport path:\n'
   } else if (NEXT_RSC_ERR_CLIENT_METADATA_EXPORT.test(message)) {

test/development/acceptance-app/rsc-build-errors.test.ts

@@ -281,6 +281,7 @@ createNextDescribe(
         ReactServerComponentsError:
 
         ./app/server-with-errors/error-file/error.js must be a Client Component. Add the \\"use client\\" directive the top of the file to resolve this issue.
+        Learn more: https://nextjs.org/docs/getting-started/react-essentials#client-components
 
            ,-[TEST_DIR/app/server-with-errors/error-file/error.js:1:1]
          1 | export default function Error() {}
@@ -402,6 +403,7 @@ createNextDescribe(
         ReactServerComponentsError:
 
         You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with \\"use client\\", so they're Server Components by default.
+        Learn more: https://nextjs.org/docs/getting-started/react-essentials
 
            ,-[TEST_DIR/node_modules/client-package/module2.js:1:1]
          1 | import { useState } from 'react'