docs(nextjs): add examples to generators (#12638)

docs/generated/packages/next.json

@@ -67,12 +67,6 @@
         "$id": "NxNextApp",
         "title": "Create a Next.js Application for Nx",
         "description": "Create a Next.js Application for Nx.",
-        "examples": [
-          {
-            "command": "nx g app myapp --directory=myorg",
-            "description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
-          }
-        ],
         "type": "object",
         "properties": {
           "name": {
@@ -187,6 +181,7 @@
           }
         },
         "required": [],
+        "examplesFile": "",
         "presets": []
       },
       "aliases": ["app"],
@@ -206,12 +201,6 @@
         "title": "Create a Page for Next",
         "description": "Create a Page for Next.",
         "type": "object",
-        "examples": [
-          {
-            "command": "nx g page my-new-page --project=my-app",
-            "description": "Generate a page in the my-app application"
-          }
-        ],
         "properties": {
           "project": {
             "type": "string",
@@ -292,6 +281,7 @@
           }
         },
         "required": ["name", "project"],
+        "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create static page in an app\" %}\n\n```shell\nnx g page my-page --project=my-app\n```\n\n{% /tab %}\n{% tab label=\"Create dynamic page in an app\" %}\n\nThe following creates a page under `apps/my-app/pages/products/[id].tsx`.\n\n```shell\nnx g page \"[id]\" --project=my-app --directory=products\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
         "presets": []
       },
       "description": "Create a page.",
@@ -310,16 +300,6 @@
         "title": "Create a React Component for Next",
         "description": "Create a React Component for Next.",
         "type": "object",
-        "examples": [
-          {
-            "command": "nx g component my-component --project=mylib",
-            "description": "Generate a component in the `mylib` library"
-          },
-          {
-            "command": "nx g component my-component --project=mylib --classComponent",
-            "description": "Generate a class component in the `mylib` library"
-          }
-        ],
         "properties": {
           "project": {
             "type": "string",
@@ -399,6 +379,7 @@
           }
         },
         "required": ["name", "project"],
+        "examplesFile": "",
         "presets": []
       },
       "description": "Create a component.",
@@ -417,16 +398,6 @@
         "title": "Create a React Library for Nx",
         "description": "Create a React Library for an Nx workspace.",
         "type": "object",
-        "examples": [
-          {
-            "command": "nx g lib mylib --directory=myapp",
-            "description": "Generate `libs/myapp/mylib`"
-          },
-          {
-            "command": "nx g lib mylib --appProject=myapp",
-            "description": "Generate a library with routes and add them to `myapp`"
-          }
-        ],
         "properties": {
           "name": {
             "type": "string",
@@ -564,6 +535,7 @@
           }
         },
         "required": ["name"],
+        "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create a new lib\" %}\n\n```shell\nnx g lib my-lib\n```\n\n{% /tab %}\n{% tab label=\"Create a new lib under a directory\" %}\n\nThe following will create a library at `libs/shared/my-lib`.\n\n```shell\nnx g lib my-lib --directory=shared\n```\n\n{% /tab %}\n{% /tabs %}\n",
         "presets": []
       },
       "aliases": ["lib"],
@@ -582,12 +554,6 @@
         "$id": "NxNextCustomServer",
         "title": "Add custom server",
         "description": "Add a custom server to existing Next.js application.",
-        "examples": [
-          {
-            "command": "nx g custom-server my-app",
-            "description": "Add a custom server to existing Next.js app."
-          }
-        ],
         "type": "object",
         "properties": {
           "project": {
@@ -606,6 +572,7 @@
           }
         },
         "required": ["project"],
+        "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Add a custom server to existing app\" %}\n\n```shell\nnx g custom-server my-app\n```\n\n{% /tab %}\n{% /tabs %}\n",
         "presets": []
       },
       "description": "Set up a custom server.",

packages/next/docs/applicaton-examples.md

@@ -0,0 +1,25 @@
+## Examples
+
+{% tabs %}
+{% tab label="Create app in a directory" %}
+
+```shell
+nx g app myapp --directory
+```
+
+{% /tab %}
+{% tab label="Use a custom Express server" %}
+
+```shell
+nx g app myapp --custom-server
+```
+
+{% /tab %}
+{% tab label="Use plain JavaScript (not TypeScript)" %}
+
+```shell
+nx g app myapp --js
+```
+
+{% /tab %}
+{% /tabs %}

packages/next/docs/component-examples.md

@@ -0,0 +1,29 @@
+## Examples
+
+{% tabs %}
+{% tab label="Create an app component" %}
+
+```shell
+nx g component my-cmp --project=my-app
+```
+
+{% /tab %}
+{% tab label="Create a component without its own folder" %}
+
+Running the following will create a component under `apps/my-app/components/my-cmp.tsx` rather than `apps/my-app/components/my-cmp/my-cmp.tsx`.
+
+```shell
+nx g component my-cmp --directory=foo --flat --project=my-app
+```
+
+{% /tab %}
+{% tab label="Create component in a custom directory" %}
+
+Running the following will create a component under `apps/my-app/foo/my-cmp.tsx` rather than `apps/my-app/my-cmp/my-cmp.tsx`.
+
+```shell
+nx g component my-cmp --directory=foo --flat --project=my-app
+```
+
+{% /tab %}
+{% /tabs %}

packages/next/docs/custom-server-examples.md

@@ -0,0 +1,11 @@
+## Examples
+
+{% tabs %}
+{% tab label="Add a custom server to existing app" %}
+
+```shell
+nx g custom-server my-app
+```
+
+{% /tab %}
+{% /tabs %}

packages/next/docs/library-examples.md

@@ -0,0 +1,20 @@
+## Examples
+
+{% tabs %}
+{% tab label="Create a new lib" %}
+
+```shell
+nx g lib my-lib
+```
+
+{% /tab %}
+{% tab label="Create a new lib under a directory" %}
+
+The following will create a library at `libs/shared/my-lib`.
+
+```shell
+nx g lib my-lib --directory=shared
+```
+
+{% /tab %}
+{% /tabs %}

packages/next/docs/page-examples.md

@@ -0,0 +1,21 @@
+## Examples
+
+{% tabs %}
+{% tab label="Create static page in an app" %}
+
+```shell
+nx g page my-page --project=my-app
+```
+
+{% /tab %}
+{% tab label="Create dynamic page in an app" %}
+
+The following creates a page under `apps/my-app/pages/products/[id].tsx`.
+
+```shell
+nx g page "[id]" --project=my-app --directory=products
+```
+
+{% /tab %}
+
+{% /tabs %}

packages/next/src/generators/application/schema.json

@@ -4,12 +4,6 @@
   "$id": "NxNextApp",
   "title": "Create a Next.js Application for Nx",
   "description": "Create a Next.js Application for Nx.",
-  "examples": [
-    {
-      "command": "nx g app myapp --directory=myorg",
-      "description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
-    }
-  ],
   "type": "object",
   "properties": {
     "name": {
@@ -126,5 +120,6 @@
       "default": false
     }
   },
-  "required": []
+  "required": [],
+  "examplesFile": "../../../docs/application-examples.md"
 }

packages/next/src/generators/component/schema.json

@@ -5,16 +5,6 @@
   "title": "Create a React Component for Next",
   "description": "Create a React Component for Next.",
   "type": "object",
-  "examples": [
-    {
-      "command": "nx g component my-component --project=mylib",
-      "description": "Generate a component in the `mylib` library"
-    },
-    {
-      "command": "nx g component my-component --project=mylib --classComponent",
-      "description": "Generate a class component in the `mylib` library"
-    }
-  ],
   "properties": {
     "project": {
       "type": "string",
@@ -98,5 +88,6 @@
       "default": false
     }
   },
-  "required": ["name", "project"]
+  "required": ["name", "project"],
+  "examplesFile": "../../../docs/application-examples.md"
 }

packages/next/src/generators/custom-server/schema.json

@@ -4,12 +4,6 @@
   "$id": "NxNextCustomServer",
   "title": "Add custom server",
   "description": "Add a custom server to existing Next.js application.",
-  "examples": [
-    {
-      "command": "nx g custom-server my-app",
-      "description": "Add a custom server to existing Next.js app."
-    }
-  ],
   "type": "object",
   "properties": {
     "project": {
@@ -30,5 +24,6 @@
       "description": "The compiler used to build the custom server."
     }
   },
-  "required": ["project"]
+  "required": ["project"],
+  "examplesFile": "../../../docs/custom-server-examples.md"
 }

packages/next/src/generators/library/schema.json

@@ -5,16 +5,6 @@
   "title": "Create a React Library for Nx",
   "description": "Create a React Library for an Nx workspace.",
   "type": "object",
-  "examples": [
-    {
-      "command": "nx g lib mylib --directory=myapp",
-      "description": "Generate `libs/myapp/mylib`"
-    },
-    {
-      "command": "nx g lib mylib --appProject=myapp",
-      "description": "Generate a library with routes and add them to `myapp`"
-    }
-  ],
   "properties": {
     "name": {
       "type": "string",
@@ -157,5 +147,6 @@
       "type": "boolean"
     }
   },
-  "required": ["name"]
+  "required": ["name"],
+  "examplesFile": "../../../docs/library-examples.md"
 }

packages/next/src/generators/page/schema.json

@@ -5,12 +5,6 @@
   "title": "Create a Page for Next",
   "description": "Create a Page for Next.",
   "type": "object",
-  "examples": [
-    {
-      "command": "nx g page my-new-page --project=my-app",
-      "description": "Generate a page in the my-app application"
-    }
-  ],
   "properties": {
     "project": {
       "type": "string",
@@ -98,5 +92,6 @@
       "default": false
     }
   },
-  "required": ["name", "project"]
+  "required": ["name", "project"],
+  "examplesFile": "../../../docs/page-examples.md"
 }