convert LoaderThis to generic type

Author: lobsterkatie

packages/nextjs/src/config/loaders/prefixLoader.ts

@@ -1,22 +1,16 @@
 import * as fs from 'fs';
 import * as path from 'path';
 
+import { LoaderThis } from './types';
+
 type LoaderOptions = {
   distDir: string;
 };
-// TODO Use real webpack types
-type LoaderThis = {
-  // Webpack 4
-  query?: LoaderOptions;
-  // Webpack 5
-  getOptions?: () => LoaderOptions;
-  addDependency: (filepath: string) => void;
-};
 
 /**
  * Inject templated code into the beginning of a module.
  */
-function prefixLoader(this: LoaderThis, userCode: string): string {
+function prefixLoader(this: LoaderThis<LoaderOptions>, userCode: string): string {
   // We know one or the other will be defined, depending on the version of webpack being used
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const { distDir } = this.getOptions ? this.getOptions() : this.query!;

packages/nextjs/src/config/loaders/types.ts

@@ -0,0 +1,10 @@
+// TODO Use real webpack types
+export type LoaderThis<Options> = {
+  // Loader options in Webpack 4
+  query?: Options;
+  // Loader options in Webpack 5
+  getOptions?: () => Options;
+
+  // Function to add outside file used by loader to `watch` process
+  addDependency: (filepath: string) => void;
+};