feat: added next custom next doc and _app (#23)

avneesh0612 · Feb 11, 2022 · 69b11e6 · 69b11e6
1 parent 4806d95
commit 69b11e6
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -16,125 +16,151 @@ NextJS and React Snippets with TypeScript support as well!🚀
 
 1. `rimr` (Import React)
 
-    ```jsx
-    import React from 'react';
-    ```
+   ```jsx
+   import React from "react";
+   ```
 
 2. `rimrd` (Import ReactDOM)
 
-    ```jsx
-    import ReactDOM from 'react-dom';
-    ```
+   ```jsx
+   import ReactDOM from "react-dom";
+   ```
 
 3. `rimrs` (Import React and useState)
 
-    ```jsx
-    import React, { useState } from 'react';
-    ```
+   ```jsx
+   import React, { useState } from "react";
+   ```
 
 4. `rimrse` (Import React, useState and useEffect)
 
-    ```jsx
-    import React, { useState, useEffect} from 'react';
-    ```
+   ```jsx
+   import React, { useState, useEffect } from "react";
+   ```
 
 5. `rfce` (React functional component)
 
-    ```jsx
-    const Component = () => {
-      return <div></div>;
-    }
-    export default Component;
-    ```
+   ```jsx
+   const Component = () => {
+     return <div></div>;
+   };
+   export default Component;
+   ```
 
 6. `rue` (React useEffect)
 
-    ```jsx
-    useEffect(() => {
-
-      }, []);
-    ```
+   ```jsx
+   useEffect(() => {}, []);
+   ```
 
 7. `rus` (React useState)
 
-    ```jsx
-    const [state, setState] = useState(initialValue);
-    ```
+   ```jsx
+   const [state, setState] = useState(initialValue);
+   ```
 
 8. `ruc` (React useContext)
 
-    ```jsx
-    const value = useContext(myContext);
-    ```
+   ```jsx
+   const value = useContext(myContext);
+   ```
 
 9. `rur` (React useRef)
 
-    ```jsx
-    const refContainer = useRef(initialValue);
-    ```
+   ```jsx
+   const refContainer = useRef(initialValue);
+   ```
 
 ### TypeScript
 
 1. `rfcet` (React functional component Typescript)
 
-    ```tsx
-    import React from "react";
+   ```tsx
+   import React from "react";
 
-    interface Props {}
+   interface Props {}
 
-    function Component({}: Props) {
-      return <div></div>;
-    }
+   function Component({}: Props) {
+     return <div></div>;
+   }
 
-    export default Component;
-    ```
+   export default Component;
+   ```
 
 ## NextJS
 
 ### JavaScript
 
-1.  `nssr` (Next.js Get Server Side Props Typescript)
+1.  `nssr` (Next.js Get Server Side Props)
 
     ```jsx
-    export const getServerSideProps = async (context) => {
+    export const getServerSideProps = async context => {
       return {
         props: {},
       };
     };
     ```
 
-2.  `nssg` (Next.js Get Static Props Typescript)
+2.  `nssg` (Next.js Get Static Props)
 
     ```jsx
-    export const getStaticProps = async (context) => {
+    export const getStaticProps = async context => {
       return {
         props: {},
       };
     };
     ```
 
+3.  `ncapp` (Next Custom App)
+
+    ```jsx
+    const MyApp = ({ Component, pageProps }) => {
+      return <Component {...pageProps} />;
+    };
+
+    export default MyApp;
+    ```
+
+4.  `ncdoc` (Next Custom Document)
+
+    ```jsx
+    import Document, { Html, Main, NextScript } from "next/_document";
+    const Document: Document = () => {
+      return (
+        <Html lang="en">
+          <body>
+            <Main />
+            <NextScript />
+          </body>
+        </Html>
+      );
+    };
+
+    export default Document;
+    ```
+
 ### TypeScript
 
 1. `nssrt` (Next.js Get Server Side Props Typescript)
 
    ```tsx
-   export const getServerSideProps: GetServerSideProps = async (context) => {
+   export const getServerSideProps: GetServerSideProps = async context => {
      return { props: {} };
    };
    ```
 
 2. `nssgt` (Next.js Get Static Props Typescript)
 
    ```tsx
-   export const getStaticProps: getStaticProps = async (context) => {
+   export const getStaticProps: getStaticProps = async context => {
      return { props: {} };
    };
    ```
 
 3. `ngip` (Get Initial Props in Next.js)
 
    ```tsx
-   Page.getInitialProps = async (context) => {
+   Page.getInitialProps = async context => {
      return { props: {} };
    };
    ```
@@ -161,3 +187,30 @@ NextJS and React Snippets with TypeScript support as well!🚀
    };
    export default Component;
    ```
+
+6. `ncappt` (Next Custom App Typescript)
+
+   ```tsx
+   const MyApp = ({ Component, pageProps }) => {
+     return <Component {...pageProps} />;
+   };
+   export default MyApp;
+   ```
+
+7. `ncdoct`(Next Custom Document Typescript)
+
+   ```tsx
+   import Document, { Html, Main, NextScript } from "next/_document";
+   const Document: Document = () => {
+     return (
+       <Html lang="en">
+         <body>
+           <Main />
+           <NextScript />
+         </body>
+       </Html>
+     );
+   };
+
+   export default Document;
+   ```
diff --git a/snippets/next-javascript.json b/snippets/next-javascript.json
@@ -10,6 +10,7 @@
     ],
     "description": "Next.js Get Server Side Props Typescript"
   },
+
   "nssg": {
     "prefix": "nssg",
     "body": [
@@ -20,5 +21,38 @@
       "};"
     ],
     "description": "Next.js Get Static Props Typescript"
+  },
+
+  "ncapp": {
+    "prefix": "ncapp",
+    "body": [
+      "const MyApp = ({ Component, pageProps }) => {",
+      "  return <Component {...pageProps} />;",
+      "}",
+      "",
+      "export default MyApp;"
+    ],
+    "description": "Next Custom App"
+  },
+
+  "ncdoc": {
+    "prefix": "ncdoc",
+    "body": [
+      "import { Html, Main, NextScript } from \"next/_document\";",
+      "",
+      "const Document = () => {",
+      "  return (",
+      "    <Html lang=\"en\">",
+      "      <body>",
+      "        <Main />",
+      "        <NextScript />",
+      "      </body>",
+      "    </Html>",
+      "  );",
+      "};",
+      "",
+      "export default Document;"
+    ],
+    "description": "Next Custom Document"
   }
 }
diff --git a/snippets/next-typescript.json b/snippets/next-typescript.json
@@ -10,6 +10,7 @@
     ],
     "description": "Next.js Get Server Side Props Typescript"
   },
+
   "nssgt": {
     "prefix": "nssgt",
     "body": [
@@ -21,6 +22,7 @@
     ],
     "description": "Next.js Get Static Props Typescript"
   },
+
   "npt": {
     "prefix": "npt",
     "body": [
@@ -37,18 +39,19 @@
     ],
     "description": "Next.js Page Typescript"
   },
+
   "ngip": {
     "prefix": "ngip",
     "body": [
       "${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}}.getInitialProps = async context => {",
       "  return {",
       "    ",
       "  };",
-      "};",
-      ""
+      "};"
     ],
     "description": "Next.js Get Initial Props"
   },
+
   "nct": {
     "prefix": "nct",
     "body": [
@@ -67,5 +70,38 @@
       "export default ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}}"
     ],
     "description": "Next.js Component Typescript"
+  },
+
+  "ncappt": {
+    "prefix": "ncappt",
+    "body": [
+      "const MyApp = ({ Component, pageProps }) => {",
+      "  return <Component {...pageProps} />;",
+      "};",
+      "",
+      "export default MyApp;"
+    ],
+    "description": "Next Custom App Typescript"
+  },
+
+  "ncdoct": {
+    "prefix": "ncdoct",
+    "body": [
+      "import Document, { Html, Main, NextScript } from \"next/_document\";",
+      "",
+      "const Document: Document = () => {",
+      "  return (",
+      "    <Html lang=\"en\">",
+      "      <body>",
+      "        <Main />",
+      "        <NextScript />",
+      "      </body>",
+      "    </Html>",
+      "  );",
+      "};",
+      "",
+      "export default Document;"
+    ],
+    "description": "Next Custom Document Typescript"
   }
 }