feat(nextjs): add support for experimental appDir

nrwl · Apr 5, 2023 · d661600 · d661600
1 parent ee1f7c1
commit d661600
Show file tree

Hide file tree

Showing 19 changed files with 125 additions and 2 deletions.
diff --git a/docs/generated/packages/next/generators/application.json b/docs/generated/packages/next/generators/application.json
@@ -124,6 +124,12 @@
         "default": false,
         "description": "Do not add dependencies to `package.json`.",
         "x-priority": "internal"
+      },
+      "appDir": {
+        "type": "boolean",
+        "default": false,
+        "description": "Enable experimental app directory for the project",
+        "x-prompt": "Do you want to use experimental app/ in this project?"
       }
     },
     "required": [],

diff --git a/packages/next/src/generators/application/application.spec.ts b/packages/next/src/generators/application/application.spec.ts
@@ -1,7 +1,6 @@
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import {
   getProjects,
-  NxJsonConfiguration,
   readJson,
   readProjectConfiguration,
   Tree,
@@ -418,4 +417,23 @@ describe('app', () => {
 
     expect(tree.exists('apps/my-app/public/.gitkeep')).toBe(true);
   });
+
+  describe('--appDir', () => {
+    it('should generate app directory instead of pages', async () => {
+      await applicationGenerator(tree, {
+        name: 'testApp',
+        style: 'css',
+        appDir: true,
+      });
+
+      expect(tree.exists('apps/testApp/pages/styles.css')).toBeFalsy();
+
+      expect(tree.exists('apps/testApp/app/global.css'));
+      expect(tree.exists('apps/testApp/app/page.tsx'));
+      expect(tree.exists('apps/testApp/app/layout.tsx'));
+      expect(tree.exists('apps/testApp/app/api/hello/route.ts'));
+      expect(tree.exists('apps/testApp/app/page.module.css'));
+      expect(tree.exists('apps/testApp/app/favicon.ico'));
+    });
+  });
 });
diff --git a/packages/next/src/generators/application/files/app/api/hello/route.ts__tmpl__ b/packages/next/src/generators/application/files/app/api/hello/route.ts__tmpl__
@@ -0,0 +1,4 @@
+export async function GET(request: Request) {
+    return new Response('Hello, from API!')
+  }
+
diff --git a/packages/next/src/generators/application/files/app/favicon.ico b/packages/next/src/generators/application/files/app/favicon.ico
diff --git a/packages/next/src/generators/application/files/app/global.__stylesExt____tmpl__ b/packages/next/src/generators/application/files/app/global.__stylesExt____tmpl__
@@ -0,0 +1 @@
+<%- styleContent %>
diff --git a/packages/next/src/generators/application/files/app/layout.tsx__tmpl__ b/packages/next/src/generators/application/files/app/layout.tsx__tmpl__
@@ -0,0 +1,22 @@
+import Head from 'next/head';
+import './global.<%= stylesExt %>';
+
+export const metadata = {
+  title: 'Nx Next App',
+  description: 'Generated by create-nx-workspace',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+    <Head>
+       <title>Welcome to <%= name %>!</title>
+    </Head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/packages/next/src/generators/application/files/app/page.module.__style__ b/packages/next/src/generators/application/files/app/page.module.__style__
@@ -0,0 +1 @@
+<%- pageStyleContent %>
diff --git a/packages/next/src/generators/application/files/app/page.tsx__tmpl__ b/packages/next/src/generators/application/files/app/page.tsx__tmpl__
@@ -0,0 +1,28 @@
+<% if (styledModule && styledModule !== 'styled-jsx') {
+  var wrapper = 'StyledPage';
+%>import styled from '<%= styledModule %>';<% } else {
+  var wrapper = 'div';
+%>
+  <%- style !== 'styled-jsx' ? `import styles from './page.module.${style}';` : '' %>
+<% }
+%>
+
+<% if (styledModule && styledModule !== 'styled-jsx') { %>
+const StyledPage = styled.div`<%- pageStyleContent %>`;
+<% }%>
+
+export function Index() {
+  /*
+   * Replace the elements below with your own.
+   *
+   * Note: The corresponding styles are in the ./<%= fileName %>.<%= style %> file.
+   */
+  return (
+    <<%= wrapper %><% if (!styledModule) {%> className={styles.page}<% } %>>
+      <%- styledModule === 'styled-jsx' ? `<style jsx>{\`${pageStyleContent}\`}</style>` : `` %>
+      <%- appContent %>
+    </<%= wrapper %>>
+  );
+};
+
+export default Index;
diff --git a/...rators/application/files/.babelrc__tmpl__ → ...application/files/common/.babelrc__tmpl__ b/...rators/application/files/.babelrc__tmpl__ → ...application/files/common/.babelrc__tmpl__
diff --git a/...tors/application/files/index.d.ts__tmpl__ → ...plication/files/common/index.d.ts__tmpl__ b/...tors/application/files/index.d.ts__tmpl__ → ...plication/files/common/index.d.ts__tmpl__
diff --git a/...s/application/files/next-env.d.ts__tmpl__ → ...cation/files/common/next-env.d.ts__tmpl__ b/...s/application/files/next-env.d.ts__tmpl__ → ...cation/files/common/next-env.d.ts__tmpl__
diff --git a/.../application/files/next.config.js__tmpl__ → ...ation/files/common/next.config.js__tmpl__ b/.../application/files/next.config.js__tmpl__ → ...ation/files/common/next.config.js__tmpl__
@@ -17,6 +17,11 @@ const nextConfig = {
     // See: https://github.com/gregberge/svgr
     svgr: false,
   },
+  <% if(appDir) { %>
+  experimental: { 
+    appDir: true
+  },
+  <% } %>
 };
 
 module.exports = withLess(withNx(nextConfig));
@@ -32,6 +37,11 @@ const nextConfig = {
     // See: https://github.com/gregberge/svgr
     svgr: false,
   },
+  <% if(appDir) { %>
+  experimental: { 
+    appDir: true
+  },
+  <% } %>
 };
 
 module.exports = withStylus(withNx(nextConfig));
@@ -50,6 +60,11 @@ const nextConfig = {
     // See: https://github.com/gregberge/svgr
     svgr: false,
   },
+  <% if(appDir) { %>
+  experimental: { 
+    appDir: true
+  },
+  <% } %>
 };
 
 module.exports = withNx(nextConfig);
@@ -64,6 +79,11 @@ const nextConfig = {
     // See: https://github.com/gregberge/svgr
     svgr: false,
   },
+  <% if(appDir) { %>
+  experimental: { 
+    appDir: true
+  },
+  <% } %>
 };
 
 module.exports = withNx(nextConfig);

diff --git a/...erators/application/files/public/.gitkeep → .../application/files/common/public/.gitkeep b/...erators/application/files/public/.gitkeep → .../application/files/common/public/.gitkeep
diff --git a/...files/specs/__fileName__.spec.tsx__tmpl__ → ...ommon/specs/__fileName__.spec.tsx__tmpl__ b/...files/specs/__fileName__.spec.tsx__tmpl__ → ...ommon/specs/__fileName__.spec.tsx__tmpl__
diff --git a/...s/application/files/tsconfig.json__tmpl__ → ...cation/files/common/tsconfig.json__tmpl__ b/...s/application/files/tsconfig.json__tmpl__ → ...cation/files/common/tsconfig.json__tmpl__
diff --git a/packages/next/src/generators/application/files/pages/favicon.ico b/packages/next/src/generators/application/files/pages/favicon.ico
diff --git a/packages/next/src/generators/application/lib/create-application-files.ts b/packages/next/src/generators/application/lib/create-application-files.ts
@@ -28,11 +28,27 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
 
   generateFiles(
     host,
-    join(__dirname, '../files'),
+    join(__dirname, '../files/common'),
     options.appProjectRoot,
     templateVariables
   );
 
+  if (options.appDir) {
+    generateFiles(
+      host,
+      join(__dirname, '../files/app'),
+      join(options.appProjectRoot, 'app'),
+      templateVariables
+    );
+  } else {
+    generateFiles(
+      host,
+      join(__dirname, '../files/pages'),
+      join(options.appProjectRoot, 'pages'),
+      templateVariables
+    );
+  }
+
   if (options.unitTestRunner === 'none') {
     host.delete(`${options.appProjectRoot}/specs/${options.fileName}.spec.tsx`);
   }

diff --git a/packages/next/src/generators/application/schema.d.ts b/packages/next/src/generators/application/schema.d.ts
@@ -17,4 +17,5 @@ export interface Schema {
   swc?: boolean;
   customServer?: boolean;
   skipPackageJson?: boolean;
+  appDir?: boolean;
 }
diff --git a/packages/next/src/generators/application/schema.json b/packages/next/src/generators/application/schema.json
@@ -124,6 +124,12 @@
       "default": false,
       "description": "Do not add dependencies to `package.json`.",
       "x-priority": "internal"
+    },
+    "appDir": {
+      "type": "boolean",
+      "default": false,
+      "description": "Enable experimental app directory for the project",
+      "x-prompt": "Do you want to use experimental app/ in this project?"
     }
   },
   "required": [],