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