fix(nextjs): use next.js image types (#6556)

packages/next/generators.json

@@ -48,6 +48,12 @@
       "factory": "./src/generators/component/component#componentGenerator",
       "schema": "./src/generators/component/schema.json",
       "description": "Create a component"
+    },
+    "library": {
+      "factory": "./src/generators/library/library#libraryGenerator",
+      "schema": "./src/generators/library/schema.json",
+      "aliases": ["lib"],
+      "description": "Create a library"
     }
   }
 }

packages/next/src/generators/library/library.spec.ts

@@ -53,4 +53,33 @@ describe('next library', () => {
       plugins: [],
     });
   });
+
+  it('should use @nrwl/next images.d.ts file', async () => {
+    const baseOptions: Schema = {
+      name: '',
+      linter: Linter.EsLint,
+      skipFormat: false,
+      skipTsConfig: false,
+      unitTestRunner: 'jest',
+      style: 'css',
+      component: true,
+    };
+    const appTree = createTreeWithEmptyWorkspace();
+
+    await libraryGenerator(appTree, {
+      ...baseOptions,
+      name: 'myLib',
+    });
+    const tsconfigFiles = readJson(
+      appTree,
+      'libs/my-lib/tsconfig.lib.json'
+    ).files;
+
+    expect(tsconfigFiles).toContain(
+      '../../node_modules/@nrwl/next/typings/image.d.ts'
+    );
+    expect(tsconfigFiles).not.toContain(
+      '../../node_modules/@nrwl/react/typings/image.d.ts'
+    );
+  });
 });

packages/next/src/generators/library/library.ts

@@ -36,6 +36,26 @@ export async function libraryGenerator(host: Tree, options: Schema) {
     return json;
   });
 
+  updateJson(
+    host,
+    joinPathFragments(projectRoot, 'tsconfig.lib.json'),
+    (json) => {
+      if (!json.files) {
+        json.files = [];
+      }
+      json.files = json.files.map((path: string) => {
+        if (path.endsWith('react/typings/image.d.ts')) {
+          return path.replace(
+            '@nrwl/react/typings/image.d.ts',
+            '@nrwl/next/typings/image.d.ts'
+          );
+        }
+        return path;
+      });
+      return json;
+    }
+  );
+
   return task;
 }
 

packages/next/typings/image.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="next/image-types/global" />
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const content: any;
+  export default content;
+}