NextJS and React Snippets with TypeScript support as well! πŸš€

Overview

Next.js and React Snippets README

NextJS and React Snippets with TypeScript support as well! πŸš€

Installation

  • Install the VSCode extension
  • Reload VSCode
  • Snippets are ready πŸŽ‰

Usage

React

JavaScript

  1. rimr (Import React)

    import React from "react";
  2. rimrd (Import ReactDOM)

    import ReactDOM from "react-dom";
  3. rimrs (Import React and useState)

    import React, { useState } from "react";
  4. rimrse (Import React, useState and useEffect)

    import React, { useState, useEffect } from "react";
  5. rfce (React functional component)

    const Component = () => {
      return <div></div>;
    };
    export default Component;
  6. rue (React useEffect)

    useEffect(() => {}, []);
  7. rus (React useState)

    const [state, setState] = useState(initialValue);
  8. ruc (React useContext)

    const value = useContext(myContext);
  9. rur (React useRef)

    const refContainer = useRef(initialValue);

TypeScript

  1. rfcet (React functional component Typescript)

    ; } export default Component;">
    import React from "react";
    
    interface Props {}
    
    function Component({}: Props) {
      return <div></div>;
    }
    
    export default Component;

NextJS

JavaScript

  1. nssr (Next.js Get Server Side Props)

    export const getServerSideProps = async context => {
      return {
        props: {},
      };
    };
  2. nssg (Next.js Get Static Props)

    export const getStaticProps = async context => {
      return {
        props: {},
      };
    };
  3. ncapp (Next Custom App)

    const MyApp = ({ Component, pageProps }) => {
      return <Component {...pageProps} />;
    };
    
    export default MyApp;
  4. ncdoc (Next Custom Document)

    { return (
    ); }; export default Document;">
    import Document, { Html, Main, NextScript } from "next/_document";
    const Document: Document = () => {
      return (
        <Html lang="en">
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    };
    
    export default Document;
  5. ngsp (Next.js Get Static Path Javascript)

    export const getStaticPaths = async () => {
      return {
          paths:[${1}],
          fallback:false
        };
    }; 
    

TypeScript

  1. nssrt (Next.js Get Server Side Props Typescript)

    export const getServerSideProps: GetServerSideProps = async context => {
      return { props: {} };
    };
  2. nssgt (Next.js Get Static Props Typescript)

    export const getStaticProps: getStaticProps = async context => {
      return { props: {} };
    };
  3. ngip (Get Initial Props in Next.js)

    Page.getInitialProps = async context => {
      return { props: {} };
    };
  4. npt (Next.js Page Typescript)

    { return <>; }; export default Page;">
    import type { NextPage } from "next";
    const Page: NextPage = () => {
      return <></>;
    };
    export default Page;
  5. nct (Next.js Component Typescript)

    = ( props: Props ) => { return
    ; }; export default Component;">
    import type { NextComponentType, NextPageContext } from "next";
    interface Props {}
    const Component: NextComponentType<NextPageContext, {}, Props> = (
      props: Props
    ) => {
      return <div></div>;
    };
    export default Component;
  6. ncappt (Next Custom App Typescript)

    const MyApp = ({ Component, pageProps }) => {
      return <Component {...pageProps} />;
    };
    export default MyApp;
  7. ncdoct(Next Custom Document Typescript)

    { return (
    ); }; export default Document;">
    import Document, { Html, Main, NextScript } from "next/_document";
    const Document: Document = () => {
      return (
        <Html lang="en">
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    };
    
    export default Document;
  8. ngspt (Next.js Get Static Path Typescript)

    export const getStaticPaths: GetStaticPaths = async () => {
      return {
        paths:[${1}],
        fallback:false
      };
    }
Comments
  • [FEATURE] create issue and pull request template

    [FEATURE] create issue and pull request template

    Description

    Create issues and pull request templates.

    Here are the docs: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

    Screenshots

    No response

    Additional information

    No response

    documentation good first issue πŸ“„ aspect: text β­ goal: addition 
    opened by 0xMukesh 7
  • [FEATURE] Add Code of Conduct

    [FEATURE] Add Code of Conduct

    Description

    Add a code of conduct file. More details- https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-code-of-conduct-to-your-project

    Screenshots

    No response

    Additional information

    No response

    good first issue πŸ“„ aspect: text πŸ status: ready for dev β­ goal: addition 
    opened by avneesh0612 5
  • Added the required snippets in next-javascript.json file

    Added the required snippets in next-javascript.json file

    Fixes Issue #41

    Changes proposed

    Check List (Check all the applicable boxes)

    • [X] My code follows the code style of this project.
    • [X] My change requires changes to the documentation.
    • [X] I have updated the documentation accordingly.
    • [X] All new and existing tests passed.
    • [X] This PR does not contain plagiarized content.
    • [X] The title of my pull request is a short description of the requested changes.

    Screenshots

    image

    Note to reviewers

    Check out the changes I made as requested in issue #41

    opened by itisaby 4
  • Improve snippet for TS Functional component

    Improve snippet for TS Functional component

    Fixes Issue

    Improves the snippet IMO

    Before:

    import React from "react";
    
    interface IExampleProps {}
    
    function Example({}: IExampleProps): JSX.Element {
      return <div></div>;
    }
    
    export default Example;
    

    After:

    import React from 'react'
    
    interface ExampleProps {}
    
    export const Example: React.FC<ExampleProps> = ({}) => {
        return ();
    }
    
    opened by carrotfarmer 3
  • feat: added next js get static path

    feat: added next js get static path

    Fixes Issue

    https://github.com/avneesh0612/React-Next.js-snippets/issues/22

    Changes proposed

    Added Get Static Path snippet for Next.js for both TypeScript and JavaScript

    Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [x] My change requires changes to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [ ] All new and existing tests passed.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.

    Screenshots

    Note to reviewers

    opened by sabinbaniya 3
  • Add JSX.Element and custom interface name to `rfct`

    Add JSX.Element and custom interface name to `rfct`

    Fixes Issue

    Closes #51 #52

    Changes proposed

    • [x] Add JSX.Element type to all functional components in ts
    • [x] Match the interface names for functional component props to the component name in the I<COMPONENT_NAME>Props format

    Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [ ] My change requires changes to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [x] All new and existing tests passed.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.

    opened by AnishDe12020 1
  • [FEATURE] A better props interface naming for ts functional components

    [FEATURE] A better props interface naming for ts functional components

    Description

    Currently, the component props interface are called Props but it would be cool it is something like I<COMPONENT_NAME>Props

    Screenshots

    No response

    Additional information

    Can contribute

    enhancement good first issue βœ¨ goal: improvement πŸ status: ready for dev πŸŸ¨ priority: medium 
    opened by AnishDe12020 1
  • Added vim support

    Added vim support

    Changes proposed

    • [x] Add snippet spec paths to root package.json so that vim plugins can find them and use them
    • [x] Add docs on how to use it with vim

    Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [x] My change requires changes to the documentation.
    • [x] I have updated the documentation accordingly.
    • [x] All new and existing tests passed.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.

    Screenshots

    Peek 2022-03-17 21-54

    opened by AnishDe12020 1
  • feat: atom extension

    feat: atom extension

    Changes proposed

    Created an atom extension for the existing VSCode extension

    Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [x] My change requires changes to the documentation.
    • [x] I have updated the documentation accordingly.
    • [ ] All new and existing tests passed.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.
    opened by 0xMukesh 1
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 24% πŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /web/public/og.png | 280.76kb | 210.51kb | 25.02% | | /web/public/jetbrains.svg | 3.29kb | 3.01kb | 8.51% | | /web/public/logo.svg | 2.86kb | 2.70kb | 5.80% | | /web/public/vscode.svg | 4.35kb | 4.28kb | 1.44% | | | | | | | Total : | 291.27kb | 220.51kb | 24.29% |


    πŸ“ docs | :octocat: repo | πŸ™‹πŸΎ issues | πŸͺ marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 1
  • fix: clean up all the snippets

    fix: clean up all the snippets

    Fixes Issue

    • Closes #31

    Changes proposed

    Cleaned up all the snippets and added react hooks in the typescript file

    Check List (Check all the applicable boxes)

    • [x] My code follows the code style of this project.
    • [x] My change requires changes to the documentation.
    • [x] I have updated the documentation accordingly.
    • [ ] All new and existing tests passed.
    • [x] This PR does not contain plagiarized content.
    • [x] The title of my pull request is a short description of the requested changes.
    opened by 0xMukesh 1
  • [FEATURE] Publish plugin to Open VSX Registry

    [FEATURE] Publish plugin to Open VSX Registry

    Description

    We’re using Gitpod for development, and it uses VS Code Browser. You can’t install directly Plugins from the Microsoft VSCode store. Instead, you need to install the Plugins from the Open VSX Registry. For that to work, the Plugin creator, need to publish their Plugin to this Open source registry.

    The publishing seems quite easy - the only thing is, you need to create an account there to publish: Publishing Extensions Β· eclipse/openvsx Wiki Β· GitHub Github Action: GitHub - HaaLeo/publish-vscode-extension: GitHub action to publish your VS Code Extension to the Open VSX Registry or Visual Studio Marketplace.

    Screenshots

    No response

    Additional information

    No response

    ⭐ goal: addition 
    opened by mmailaender 0
  • fix(deps): update dependency axios to v1

    fix(deps): update dependency axios to v1

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | axios (source) | 0.27.2 -> 1.1.2 | age | adoption | passing | confidence |


    Release Notes

    axios/axios

    v1.1.2

    Compare Source

    Fixed
    • Fixed broken exports for UMD builds.
    Contributors to this release

    v1.1.1

    Compare Source

    Fixed
    • Fixed broken exports for common js. This fix breaks a prior fix, I will fix both issues ASAP but the commonJS use is more impactful.
    Contributors to this release

    v1.1.0

    Compare Source

    Fixed
    • Fixed missing exports in type definition index.d.ts #​5003
    • Fixed query params composing #​5018
    • Fixed GenericAbortSignal interface by making it more generic #​5021
    • Fixed adding "clear" to AxiosInterceptorManager #​5010
    • Fixed commonjs & umd exports #​5030
    • Fixed inability to access response headers when using axios 1.x with Jest #​5036
    Contributors to this release

    v1.0.0

    Compare Source

    Added
    • Added stack trace to AxiosError #​4624
    • Add AxiosError to AxiosStatic #​4654
    • Replaced Rollup as our build runner #​4596
    • Added generic TS types for the exposed toFormData helper #​4668
    • Added listen callback function #​4096
    • Added instructions for installing using PNPM #​4207
    • Added generic AxiosAbortSignal TS interface to avoid importing AbortController polyfill #​4229
    • Added axios-url-template in ECOSYSTEM.md #​4238
    • Added a clear() function to the request and response interceptors object so a user can ensure that all interceptors have been removed from an axios instance #​4248
    • Added react hook plugin #​4319
    • Adding HTTP status code for transformResponse #​4580
    • Added blob to the list of protocols supported by the browser #​4678
    • Resolving proxy from env on redirect #​4436
    • Added enhanced toFormData implementation with additional options 4704
    • Adding Canceler parameters config and request #​4711
    • Added automatic payload serialization to application/x-www-form-urlencoded #​4714
    • Added the ability for webpack users to overwrite built-ins #​4715
    • Added string[] to AxiosRequestHeaders type #​4322
    • Added the ability for the url-encoded-form serializer to respect the formSerializer config #​4721
    • Added isCancel type assert #​4293
    • Added data URL support for node.js #​4725
    • Adding types for progress event callbacks #​4675
    • URL params serializer #​4734
    • Added axios.formToJSON method #​4735
    • Bower platform add data protocol #​4804
    • Use WHATWG URL API instead of url.parse() #​4852
    • Add ENUM containing Http Status Codes to typings #​4903
    • Improve typing of timeout in index.d.ts #​4934
    Changed
    • Updated AxiosError.config to be optional in the type definition #​4665
    • Updated README emphasizing the URLSearchParam built-in interface over other solutions #​4590
    • Include request and config when creating a CanceledError instance #​4659
    • Changed func-names eslint rule to as-needed #​4492
    • Replacing deprecated substr() with slice() as substr() is deprecated #​4468
    • Updating HTTP links in README.md to use HTTPS #​4387
    • Updated to a better trim() polyfill #​4072
    • Updated types to allow specifying partial default headers on instance create #​4185
    • Expanded isAxiosError types #​4344
    • Updated type definition for axios instance methods #​4224
    • Updated eslint config #​4722
    • Updated Docs #​4742
    • Refactored Axios to use ES2017 #​4787
    Deprecated
    • There are multiple deprecations, refactors and fixes provided in this release. Please read through the full release notes to see how this may impact your project and use case.
    Removed
    Fixed
    Chores
    Security
    Contributors to this release

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Cursor location

    Cursor location

    Description

    When we use "rfc" snippet the cursor stays on name of the component. It would be great if the cursor is inside the div when we use this snippet

    Screenshots

    image

    Additional information

    No response

    ⭐ goal: addition 
    opened by madanbajgai 1
  • chore(deps): update tripss/conventional-changelog-action action to v3.15.0

    chore(deps): update tripss/conventional-changelog-action action to v3.15.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | TriPSs/conventional-changelog-action | action | minor | v3.14.0 -> v3.15.0 |


    Release Notes

    TriPSs/conventional-changelog-action

    v3.15.0

    Compare Source

    Features

    v3.14.1

    Compare Source

    Bug Fixes
    • Add global unhandledRejection handler (0600ca1)

    Configuration

    πŸ“… Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    β™» Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    πŸ”• Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Dependency Dashboard

    Dependency Dashboard

    This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

    Open

    These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

    Detected dependencies

    github-actions
    .github/workflows/format.yml
    • actions/checkout v3
    • actions/setup-node v3
    • actions/cache v3
    .github/workflows/release.yml
    • actions/checkout v3
    • TriPSs/conventional-changelog-action v3.14.0
    • actions/create-release v1
    npm
    package.json
    • @commitlint/cli ^17.0.0
    • @commitlint/config-conventional ^17.0.0
    • husky 8.0.1
    • prettier 2.7.1
    • pretty-quick 3.1.3
    • vscode ^1.64.0
    src/automation/package.json
    • axios 0.27.2
    • object-path 0.11.8
    • shelljs 0.8.5
    • prettier 2.7.1
    src/extension/package.json
    • vscode ^1.64.0

    • [ ] Check this box to trigger a request for Renovate to run again on this repository
    opened by renovate[bot] 0
Releases(v1.7.0)
Owner
Avneesh Agarwal
A full-stack web developer, designer, content creator, opensource enthusiast and student πŸ€“
Avneesh Agarwal
Adding Headless CMS to NextJS like a Pro, this repository contains code examples and guide on how to integrate Storyblok, a headless CMS to NextJS.

Adding Storyblok to NextJS Like A Pro The official website describes Storyblok in the following terms: Storyblok is the only Headless Content Manageme

Harun Mbaabu { GrayHat } 23 Sep 16, 2022
πŸš€ Free NextJS Landing Page Template written in Tailwind CSS 2.0 and TypeScript ⚑️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.

?? Free NextJS Landing Page Template written in Tailwind CSS 2.0 and TypeScript ⚑️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.

Rem W. 963 Dec 31, 2022
Boilerplate repository for creating projects with NextJS. We have also included: Jest, Typescript, Prettier, React Testing Library and others. Check the package.json!

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jessica Castro 1 Nov 12, 2021
An Example of a PWA using Nextjs, Material-UI, Typescript and Auth0 πŸ’—

Nitro - Next.js, Material UI, Auth0 and Typescript PR's are very welcome Please add .env to .gitignore before adding any secrets Links Auth Setup NPM

William Luke 247 Jan 2, 2023
This is a boilerplate to be use in your project with tecnologies TypeScript, NextJS, Jest and Styled-components.

NextJS Boilerplate This is a boilerplate to be use in your project with tecnologies TypeScript, NextJS, Jest and Styled-components. What is inside? Th

Jefferson Soares 11 Jan 28, 2022
a scaffold with nextjs, react, typescript, mongodb, koa

a scaffold with nextjs, react, typescript, mongodb, koa

null 3 Jul 27, 2021
test for a job, application made with nextJs ReactJs, TypeScript, Styled Component to consume an api

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server:: npm run dev # or yarn dev Open http:/

Gerson Dantas 5 Nov 29, 2022
:whale: Simple and Accessible PWA boilerplate with Nextjs 10 + React Hooks

Simple NextJS PWA boilerplate. Getting Started First, run the development server: npm run dev # or yarn dev Open http://localhost:3000 with your brows

Ademola. 897 Dec 11, 2022
Personal website built using react, nextjs, tailwind, and graphql deployed to vercel.

Website My personal website built using nextjs. Getting Started Clone the repository git clone [email protected]:searchableguy/website.git Move inside th

Search 2 Jan 17, 2022
A boilerplate NextJS with Redux and Material UI

NextJS with Redux and Material-UI example A boilerplate NextJS with Redux and Material UI Getting Started Installing Cloning the project. git clone ht

JoΓ£o Paulo Moraes 125 Jul 15, 2022
:rocket: A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.

We spend time using good community practices to make your project scalable. ?? A basis for reducing the configuration of your projects with Next.js, b

React Next Boilerplate 298 Dec 25, 2022
🦚 Beautiful Nextjs starter for software engineers and designers to show work they're so proud of

?? Next Starter Peacock Peacock is a NextJS portfolio Starter for software engineers and designers. Showcase your awesome work and build personal site

Victor Ofoegbu 116 Dec 5, 2022
Notion-powered blog starter with Nextjs and Tailwind

Nextjs Notion Blog Starter Default demo - Deployed from main branch Blog setup - I wrote an article on how to use this starter to start your blog My p

Tuan Phung 95 Dec 28, 2022
React + Nextjs + MobX starter

This is my minimal yet functional React starter kit and demo app as of August 2018. If you feel tired of Javascript fatigue, and want to get started q

Tomi Mickelsson 49 Dec 3, 2022
MongoDB, Express, React (NextJS), Node - Stack Boilerplate

MERN Boilerplate UNDER DEVELOPMENT A MERN Stack Boilerplate NOTE: I used Next instead of the default CRA. This is to provide SSR (Server-Side Renderin

Prince Carlo Juguilon 9 Oct 31, 2022
Solana blockchain candy machine app boilerplate on top of Metaplex Candy Machine. NextJS, Tailwind, Anchor, SolanaLabs.React, dev/mainnet automation scripts.

Solana blockchain candy machine app boilerplate on top of Metaplex Candy Machine. NextJS, Tailwind, Anchor, SolanaLabs.React, dev/mainnet automation scripts.

Kevin Faveri 261 Dec 30, 2022
NextJS Template - A complete project structure for you to start coding React applications right away.

A complete project structure for you to start coding React applications right away. Tech and Tools ReactJS NextJS TypeScript Styled Co

null 3 Dec 23, 2022
Projeto construido durante a Imersão React edição NextJS da Alura!

AluraQuiz Base Seja bem vindo ao projeto base do AluraQuiz!!! Passos fundamentais: Marque esse projeto com uma estrela Siga as instruçáes das aulas e

Alura Challenges: ImersΓ΅es, Mergulhos e Desafios 1.3k Dec 22, 2022