React Snippets for Next.js by iJS

Thanks for giving this a go. Hope this helps and makes your coding more efficient and fun.

Hello.

Animations coming soon.

Pull requests for animations or any other contributions are most welcome!

Installation

Launch the Command Pallete (Ctrl + Shift + P or ⌘Cmd + Shift + P) and type "Install Extensions" (or navigate from the sidebar to Extensions tab).
In search box type in "iJS" and choose the React Next.js Snippets by iJS
Install the extension (you may need to relaunch VS Code)
Get a coffee, a cookie and celebrate by writing some Next.js code more effeciently than ever!

Supported languages (file extensions)

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)

Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.

Must have React Snippets

Trigger	Content
`imr→`	Explicitly import React
`imrc→`	Import React { Component }
`imst→`	(16.8+) useState import
`ust→`	Use (16.8+) useState hook
`imeff→`	(16.8+) useEffect import
`uueff→`	use useEffect
`imctx→`	(16.8+) useContext import
`uctx→`	Use React useContext hook
`immem→`	(16.8+) useMemo import
`imref→`	(16.8+) useRef import
`imimphan→`	(16.8+) useImperativeHandle import
`imlayeff→`	(16.8+) useLayoutEffect import
`imdebval→`	(16.8+) useDebugValue import
`imt→`	Import PropTypes
`cc`	Class Component
`ccc→`	Class Component With Constructor
`fc→`	Functional Component
`fce→`	Functional Component as named export
`fcde→`	Functional Component with default export
`fcst→`	Functional Component with useState Hook

Next.js `getInitialProps()`

Trigger	Content
`gip→`	getInitialProps() outside component
`ccgip→`	static getInitialProps() inside class component
`ccgipaq→`	static getInitialProps() withApollo() expose query

Next.js `getStaticProps()`

Trigger	Content
`gsp→`	exports getStaticProps()
`imgsp`	import GetStaticProps type
`iminfgsp`	import InferGetStaticPropsType
`ninfgsp`	use InferGetStaticPropsType

Next.js `getServerSideProps()`

Trigger	Content
`gssp→`	exports getServerSideProps()
`imgvsp→`	imports GetServerSideProps type
`iminfgvsp→`	imports InferGetServerSidePropsType
`ninfgvsp→`	use InferGetServerSidePropsType

Next.js `getStaticPaths()`

Trigger	Content
`gspaths→`	exports getStaticPaths()
`imgspaths→`	import GetStaticPaths

Next.js `Head />`

Trigger	Content
`imhd→`	import Head
`nhd→`	Use Head

Next.js `Image />`

Trigger	Content
`imimg→`	import Image
`nimg→`	Use sized image
`nuimg→`	Use unsized image

Next.js `Link />`

Trigger	Content
`imlnk→`	import Link
`nlnk→`	Use Link
`nlnkpath→`	Next Link tag with pathname;
`nlnkdyn→`	Next Link tag with dynamic route;

Next.js `Router />`

Trigger	Content
`imrtr→`	import Router
`nrtr→`	Declare Next.js Router from useRouter
`nqprtr→`	Destructure Next.js query param from Router from useRouter
`imrtrwr→`	import Router and withRouter HOC
`imusrtr→`	import Router hook

More snippets to come, stay tuned!

Expanded Snippets

imr - Import React - if you must (Next.js imports React implicitly)

import React from "react";

imrc - Import React, Component

import { Component } from "react";

imst - Import { useState }

import { useState } from "react";

ust - React useState

  const [value, setValue] = useState(${1:INITIAL_VALUE});

imeff - Import { useEffect }

import { useEffect } from "react";

imctx - Import { useContext }

import { useContext } from "react";

uctx - React useContext

const | = useContext(|);';

immem - Import { useMemo }

import { useMemo } from "react";

imref - Import { useRef }

import { useRef } from "react";

imimphan - imImport { useImperativeHandle }

import { useImperativeHandle } from "react";

imlayeff - imImport { useLayoutEffect }

import { useLayoutEffect } from "react";

imdebval - imImport { useDebugValue }

import { useDebugValue } from "react";

imt - imImport PropTypes

import PropTypes from "prop-types";

impt - Import PropTypes

import PropTypes from "prop-types";

impc - Import PureComponent

import React, { PureComponent } from "react";

cc - Class Component

class | extends Component {
  state = { | }

  render() {
    return ( | );
  }
}

export default |;

ccc - Class Component With Constructor

class | extends React.Component {
    constructor(props) {
      super(props);
      this.state = { | }
    }
    render() {
        return ( | );
    }
}

export default |;

fc - Functional Component without a state

const | = (|) => {
  return ( | );
}

fce - Functional Component as named export

export const | = (|) => {
  return ( | );
}

fcde Functional Component with default export

const | = (|) => {
  return ( | );
}

export default |;

fcst - Functional Component with a useState hook

import { useState } from 'react';

const | = props => {
  const [value, setValue] = useState(${1:INITIAL_VALUE});

  return ( | );
};

export default |;

imhd - import Next.js Head

import Head from "next/head";

nhd - Use Next.js Head

<Head> | </Head>

imgsp - import Next.js GetStaticProps type

import { GetStaticProps } from "next";

iminfgsp - import Next.js InferGetStaticPropsType

import { InferGetStaticPropsType } from "next";

ninfgsp - import Next.js InferGetStaticPropsType

function |({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
      return |
      }

gip - getInitialProps() outside component

|.getInitialProps = async ({ req }) => {
  return |
}

ccgip - getInitialProps() outside component

static async getInitialProps() { return { | }; }

ccgipaq - static getInitialProps() withApollo() expose query

static async getInitialProps({ Component, ctx }) {
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  pageProps.query = ctx.query;
  pageProps.asPath = ctx.asPath;

  return { pageProps };
}

gsp - exports getStaticProps()

export async function getStaticProps(context) {
  return {
    props: { | }, // will be passed to the page component as props
  }
}

export const getStaticProps: GetStaticProps = async (context) => {
  return {
    props: { | } // will be passed to the page component as props
  };
}

gspaths - exports getStaticPaths()

export async function getStaticPaths() {
  return {
    paths: [
      { params: { | } } // See https://nextjs.org/docs/basic-features/data-fetching#the-paths-key-required
    ],
    fallback: | // See https://nextjs.org/docs/basic-features/data-fetching#fallback-true
  };
}

export const getStaticPaths: GetStaticPaths = async () => {
  return {
    paths: [
      { params: { | } }
    ],
    fallback: |
  };
}

gssp - exports getServerSideProps()

export async function getServerSideProps(context) {
  return {
    props: { | }, // will be passed to the page component as props
  };
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  return {
    props: { | },
  };
}

imgvsp - import Next.js GetServerSideProps type

import { GetServerSideProps } from "next";

iminfgvsp - import Next.js InferGetServerSidePropsType type

import { InferGetServerSidePropsType } from "next";

ninfgvsp - use Next.js InferGetServerSidePropsType type

function |({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) {
      return |
      }

imlnk - import Next.js Link

import Link from "next/link";

nimg - Use Sized Next.js image

<Image alt="|" src="|" width="|" height="|" />

nuimg - Use unsized Next.js image

<Image alt="|" src="|" width="|" unsized />

nlnk - Use Next.js Link

<Link href="|">
  <a>|</a>
</Link>

nlnkpath - Use Next.js Link With Pathname

<Link href={{ pathname: |, query: { queryName: | } }}>
  <a>|</a>
</Link>

nlnkdyn - Use Next.js LinkTagWithDynmicRoute

<Link href="/|" as={`/|`}>
  <a>|</a>
</Link>

imrtr - importNextRouter

import Router from "next/router";

nrtr - Next.js Router from useRouter

const router = useRouter();

nqprtr - Next.js query param from useRouter

const { $1 } = router.query;

imrtrwr - importNextRouterWithRouter

import Router, { withRouter } from "next/router";

imusrtr - importNextUseRouter

import { useRouter } from "next/router";

iJS.to

ijsto/reactnextjssnippets