fix(nextjs): Page generator should work out of the box (#20775)

nrwl · Dec 14, 2023 · aaf3e54 · aaf3e54
1 parent 439a31c
commit aaf3e54
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 23 deletions.
diff --git a/packages/next/src/generators/page/page.ts b/packages/next/src/generators/page/page.ts
@@ -27,6 +27,7 @@ export async function pageGeneratorInternal(host: Tree, schema: Schema) {
   const options = await normalizeOptions(host, schema);
   const componentTask = await reactComponentGenerator(host, {
     ...options,
+    isNextPage: true,
     nameAndDirectoryFormat: 'as-provided', // already determined the directory so use as is
     export: false,
     classComponent: false,

diff --git a/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__ b/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
@@ -32,13 +32,30 @@ const Styled<%= className %> = styled.div`
   color: pink;
 `;
 <% }%>
-<% if (classComponent) { %>
-export class <%= className %> extends Component<<%= className %>Props> {
-  override render() {
+<% if(!isNextPage) { %>
+  <% if (classComponent) { %>
+  export class <%= className %> extends Component<<%= className %>Props> {
+    override render() {
+      return (
+        <<%= wrapper %><%- extras %>>
+          <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
+          <p>Welcome to <%= className %>!</p>
+          <% if (routing) { %>
+            <ul>
+              <li><Link to="/"><%= name %> root</Link></li>
+            </ul>
+            <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+          <% } %>
+        </<%= wrapper %>>
+      );
+    }
+  }
+  <% } else { %>
+  export function <%= className %>(props: <%= className %>Props) {
     return (
       <<%= wrapper %><%- extras %>>
-        <%= styledModule === 'styled-jsx' ? `<style jsx>{\`div { color: pink; }\`}</style>` : `` %>
-        <p>Welcome to <%= className %>!</p>
+        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+        <h1>Welcome to <%= className %>!</h1>
         <% if (routing) { %>
           <ul>
             <li><Link to="/"><%= name %> root</Link></li>
@@ -47,25 +64,25 @@ export class <%= className %> extends Component<<%= className %>Props> {
         <% } %>
       </<%= wrapper %>>
     );
-  }
-}
+  };
+  <% } %>
+
+  export default <%= className %>;
 <% } else { %>
-export function <%= className %>(props: <%= className %>Props) {
-  return (
-    <<%= wrapper %><%- extras %>>
-      <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
-      <h1>Welcome to <%= className %>!</h1>
-      <% if (routing) { %>
-        <ul>
-          <li><Link to="/"><%= name %> root</Link></li>
-        </ul>
-        <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
-      <% } %>
-    </<%= wrapper %>>
-  );
-};
+  export default function <%= className %>(props: <%= className %>Props) {
+    return (
+      <<%= wrapper %><%- extras %>>
+        <% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
+        <h1>Welcome to <%= className %>!</h1>
+        <% if (routing) { %>
+          <ul>
+            <li><Link to="/"><%= name %> root</Link></li>
+          </ul>
+          <Route path="/" element={<div>This is the <%= name %> root route.</div>} />
+        <% } %>
+      </<%= wrapper %>>
+    );
+  };
 <% } %>
 
-export default <%= className %>;
-
 <% if (inSourceTests === true) { %> <%- inSourceVitestTests %> <% } %>
diff --git a/packages/react/src/generators/component/lib/normalize-options.ts b/packages/react/src/generators/component/lib/normalize-options.ts
@@ -57,6 +57,9 @@ export async function normalizeOptions(
   options.globalCss = options.globalCss ?? false;
   options.inSourceTests = options.inSourceTests ?? false;
 
+  //TODO (nicholas): Remove when Next page generator is removed
+  options.isNextPage = options.isNextPage ?? false;
+
   return {
     ...options,
     projectName,

diff --git a/packages/react/src/generators/component/schema.d.ts b/packages/react/src/generators/component/schema.d.ts
@@ -33,6 +33,8 @@ export interface Schema {
   // Used by other wrapping generators to preserve previous behavior
   // e.g. @nx/next:component
   derivedDirectory?: string;
+  // Used by Next.js to determine how React should generate the page
+  isNextPage?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {