[add] getStaticProps, getStaticProps, getServerSideProps

Signed-off-by: ScottAgirs <[email protected]>
ijsto · Jun 27, 2020 · e16238e · e16238e
1 parent 7120e4a
commit e16238e
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2020-06-26
+
+### ADDED
+
+- `gsp→` | Next.js getStaticProps() export
+- `gspaths→` | Next.js getStaticProps() export
+- `gssp→` | Next.js getServerSideProps() export
+
 ## [1.3.0] - 2020-05-12
 
 ### ADDED

diff --git a/README.md b/README.md
@@ -68,6 +68,24 @@ Below is a list of all available snippets and the triggers of each one. The **
 | `ccgip→` | static getInitialProps() inside class component     |
 | `gipaq→` | Next.js getInitialProps() withApollo() expose query |
 
+## Next.js getStaticProps()
+
+| Trigger | Content                  |
+| ------: | ------------------------ |
+|  `gsp→` | exports getStaticProps() |
+
+## Next.js getServerSideProps()
+
+| Trigger | Content                      |
+| ------: | ---------------------------- |
+| `gssp→` | exports getServerSideProps() |
+
+## Next.js getStaticPaths()
+
+|    Trigger | Content                  |
+| ---------: | ------------------------ |
+| `gspaths→` | exports getStaticPaths() |
+
 ## Next.js Link
 
 |     Trigger | Content                           |

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "displayName": "Next.js React Snippets by iJS",
   "description": "React Snippets (ES6) tailored for Next.js apps",
   "publisher": "iJS",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ijsto/reactnextjssnippets"

diff --git a/snippets/snippets.json b/snippets/snippets.json
@@ -1,23 +1,17 @@
 {
   "Import React": {
     "prefix": "imr",
-    "body": [
-      "import React from 'react';"
-    ],
+    "body": ["import React from 'react';"],
     "description": "Import React - if you must."
   },
   "Import { Component }": {
     "prefix": "imrc",
-    "body": [
-      "import { Component } from 'react';"
-    ],
+    "body": ["import { Component } from 'react';"],
     "description": "Import { Component }"
   },
   "Import { useState }": {
     "prefix": "imst",
-    "body": [
-      "import { useState } from 'react';"
-    ],
+    "body": ["import { useState } from 'react';"],
     "description": "React 16.8+ useState import"
   },
   "React useState": {
@@ -27,23 +21,17 @@
   },
   "Import { useEffect }": {
     "prefix": "imeff",
-    "body": [
-      "import { useEffect } from 'react';"
-    ],
+    "body": ["import { useEffect } from 'react';"],
     "description": "React 16.8+ useEffect import"
   },
   "Use useEffect": {
     "prefix": "uueff",
-    "body": [
-      "useEffect(() => {$1, [$0]);"
-    ],
+    "body": ["useEffect(() => {$1, [$0]);"],
     "description": "useEffect snippet with empty second argument"
   },
   "Import { useContext }": {
     "prefix": "imctx",
-    "body": [
-      "import { useContext } from 'react';"
-    ],
+    "body": ["import { useContext } from 'react';"],
     "description": "React 16.8+ useContext import"
   },
   "React useContext": {
@@ -53,44 +41,32 @@
   },
   "Import { useMemo }": {
     "prefix": "immem",
-    "body": [
-      "import { useMemo } from 'react';"
-    ],
+    "body": ["import { useMemo } from 'react';"],
     "description": "React 16.8+ useMemo import"
   },
   "Import { useRef }": {
     "prefix": "imref",
-    "body": [
-      "import { useRef } from 'react';"
-    ],
+    "body": ["import { useRef } from 'react';"],
     "description": "React 16.8+ useRef import"
   },
   "Import { useImperativeHandle }": {
     "prefix": "imimphan",
-    "body": [
-      "import { useImperativeHandle } from 'react';"
-    ],
+    "body": ["import { useImperativeHandle } from 'react';"],
     "description": "React 16.8+ useImperativeHandle import"
   },
   "Import { useLayoutEffect }": {
     "prefix": "imlayeff",
-    "body": [
-      "import { useLayoutEffect } from 'react';"
-    ],
+    "body": ["import { useLayoutEffect } from 'react';"],
     "description": "React 16.8+ useLayoutEffect import"
   },
   "Import { useDebugValue }": {
     "prefix": "imdebval",
-    "body": [
-      "import { useDebugValue } from 'react';"
-    ],
+    "body": ["import { useDebugValue } from 'react';"],
     "description": "React 16.8+ useDebugValue import"
   },
   "Import PropTypes": {
     "prefix": "imt",
-    "body": [
-      "import PropTypes from 'prop-types';"
-    ],
+    "body": ["import PropTypes from 'prop-types';"],
     "description": "Import PropTypes"
   },
   "Class Component": {
@@ -184,12 +160,44 @@
   },
   "Next.js getInitialProps() inside Class Component": {
     "prefix": "ccgip",
+    "body": ["static async getInitialProps() {", "\treturn { $1 };", "}"],
+    "description": "Next.js static async getInitialProps() inside Class Component"
+  },
+  "Next.js getStaticProps() export": {
+    "prefix": "gsp",
     "body": [
-      "static async getInitialProps() {",
-      "\treturn { $1 };",
+      "export async function getStaticProps(context) {",
+      "\treturn {",
+      "\t\tprops: {$1}",
+      "\t};",
       "}"
     ],
-    "description": "Next.js static async getInitialProps() inside Class Component"
+    "description": "Next.js getStaticProps() export"
+  },
+  "Next.js getStaticProps() export": {
+    "prefix": "gspaths",
+    "body": [
+      "export async function getStaticPaths() {",
+      "\treturn {",
+      "\t\tpaths: [",
+      "\t\t\t{ params: { $1 }}",
+      "\t\t],",
+      "\t\tfallback: $2",
+      "\t};",
+      "}"
+    ],
+    "description": "Next.js pre-renders all the static paths https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation"
+  },
+  "Next.js getServerSideProps() export": {
+    "prefix": "gssp",
+    "body": [
+      "export async function getServerSideProps(context) {",
+      "\treturn {",
+      "\t\tprops: {$1}",
+      "\t};",
+      "}"
+    ],
+    "description": "Next.js getServerSideProps() export https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering"
   },
   "Next.js getInitialProps() expose query": {
     "prefix": "ccgipaq",
@@ -210,11 +218,7 @@
   },
   "Use Next.js Head": {
     "prefix": "nhd",
-    "body": [
-      "<Head>",
-      "\t$1",
-      "</Head>"
-    ],
+    "body": ["<Head>", "\t$1", "</Head>"],
     "description": "Next.js Head Tag"
   },
   "import Next.js Link": {
@@ -224,13 +228,7 @@
   },
   "Use Next.js Link": {
     "prefix": "nlnk",
-    "body": [
-      "<Link href=\"$1\">",
-      "\t<a>",
-      "\t\t$0",
-      "\t</a>",
-      "</Link>"
-    ],
+    "body": ["<Link href=\"$1\">", "\t<a>", "\t\t$0", "\t</a>", "</Link>"],
     "description": "Next.js Link Tag with <a>"
   },
   "Use Next.js Link With Pathname": {
@@ -280,4 +278,4 @@
     "body": "import { useRouter } from 'next/router';",
     "description": "Next.js { useRouter } import"
   }
-}
+}