Next.js ReCaptcha V3 - Straightforward solution for using ReCaptcha in your Next.js application

Last update: Jun 18, 2022

Next.js ReCaptcha V3

Straightforward solution for using ReCaptcha in your Next.js application.

npm package Bundle Size type definition License: MIT

🗜️ Tiny and Tree-Shakable

🥰 Written in TypeScript

🐅 Highly customizable

😎 Uses next/script component

Install

yarn add next-recaptcha-v3

or

npm install next-recaptcha-v3 --save

Generate reCAPTCHA Key

To use ReCaptcha, you need to generate a reCAPTCHA_site_key for your site's domain. You can get one here.

You can either add generated key as a Next.js env variable

NEXT_PUBLIC_RECAPTCHA_SITE_KEY="GTM-XXXXXXX"

or pass it directly to the ReCaptchaProvider using reCaptchaKey attribute.

Getting Started

Wrap your application with ReCaptchaProvider. It will load ReCaptcha script to your document.

( );">
import { ReCaptchaProvider } from "next-recaptcha-v3";

const MyApp = ({ Component, pageProps }) => (
  <ReCaptchaProvider reCaptchaKey="[GTM-XXXXXXX]">
    <Component {...pageProps} />
  </ReCaptchaProvider>
);

ReCaptchaProvider uses Next.js Script to add ReCaptcha script to the document.

ReCaptchaProvider Props

Prop Type Default Required Description
reCaptchaKey string ? Your reCAPTCHA key, get one from here
useEnterprise boolean false Set to true if you use ReCaptcha Enterprise
useRecaptchaNet boolean false Set to true if you want to use recaptcha.net to load ReCaptcha script. docs
language string Optional Language Code

You must pass reCaptchaKey if NEXT_PUBLIC_RECAPTCHA_SITE_KEY env variable is not defined.

All extra props are passed directly to the Script tag, so you can use all props from the next/script documentation.

reCAPTCHA Enterprise

If you're using reCAPTCHA Enterprise, add useEnterprise to your ReCaptchaProvider. Checkout official quickstart guide here.

( );">
import { ReCaptchaProvider } from "next-recaptcha-v3";

const MyApp = ({ Component, pageProps }) => (
  <ReCaptchaProvider useEnterprise>
    <Component {...pageProps} />
  </ReCaptchaProvider>
);

Usage

When invoked, ReCaptcha will analyze the user's behavior and create a one-time token. It can only be used once and is only valid for a couple of minutes, so you should generate it just before the actual validation.

Send the resulting token to the API request to your server. You can then decrypt the token using the ReCaptcha /siteverify API and ignore the call if it came from a bot.

  1. React Hook: useReCaptcha (recommended approach)

Use executeRecaptcha function returned from the useReCaptcha hook to generate token. Add a unique action name to better understand at what moment the token was generated

{ const [name, setName] = useState(""); // Import 'executeRecaptcha' using 'useReCaptcha' hook const { executeRecaptcha } = useReCaptcha(); const handleSubmit = useCallback(async (e) => { e.preventDefault(); // Generate ReCaptcha token const token = await executeRecaptcha("form-submit"); // Attach generated token to your API requests and validate it on the server fetch("/api/form-submit", { method: "POST", body: { data: { name }, token, }, }); }, []); return (
setName(e.target.value)} />
); };">
import { useState } from "react";
import { useReCaptcha } from "next-recaptcha-v3";

const MyForm = () => {
  const [name, setName] = useState("");

  // Import 'executeRecaptcha' using 'useReCaptcha' hook
  const { executeRecaptcha } = useReCaptcha();

  const handleSubmit = useCallback(async (e) => {
    e.preventDefault();

    // Generate ReCaptcha token
    const token = await executeRecaptcha("form-submit");

    // Attach generated token to your API requests and validate it on the server
    fetch("/api/form-submit", {
      method: "POST",
      body: {
        data: { name },
        token,
      },
    });
  }, []);

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
};
  1. ReCaptcha component

Alternatively, you can also generate token by using ReCaptcha component.

{ const [token, setToken] = useState(null); useEffect(() => { if (token) { // Validate token and make some actions if it's a bot validateToken(token); } }, [token]); return ( <>

Hello

); };">
import { useEffect } from "react";
import { ReCaptcha } from "next-recaptcha-v3";
import { validateToken } from "./utils";

const MyPage = () => {
  const [token, setToken] = useState<string>(null);

  useEffect(() => {
    if (token) {
      // Validate token and make some actions if it's a bot
      validateToken(token);
    }
  }, [token]);

  return (
    <>
      <GoogleReCaptcha onVerify={setToken} action="page-view" />
      <h1>Hello</h1>
    </>
  );
};
  1. withReCaptcha HOC
= ({ executeRecaptcha }) => { const [token, setToken] = useState(null); useEffect(() => { if (typeof executeRecaptcha === "function") { const generateToken = async () => { const newToken = await executeRecaptcha("page-view"); setToken(newToken); }; generateToken(); } }, [executeRecaptcha]); useEffect(() => { if (token) { // Validate token and make some actions if it's a bot validateToken(token); } }, [token]); return

Hello

; }; export default withReCaptcha(MyPage);">
import { useEffect } from "react";
import { withReCaptcha, WithReCaptchaProps } from "next-recaptcha-v3";
import { validateToken } from "./utils";

interface MyPageProps extends WithReCaptchaProps {}

const MyPage: React.FC<MyPageProps> = ({ executeRecaptcha }) => {
  const [token, setToken] = useState<string>(null);

  useEffect(() => {
    if (typeof executeRecaptcha === "function") {
      const generateToken = async () => {
        const newToken = await executeRecaptcha("page-view");
        setToken(newToken);
      };
      generateToken();
    }
  }, [executeRecaptcha]);

  useEffect(() => {
    if (token) {
      // Validate token and make some actions if it's a bot
      validateToken(token);
    }
  }, [token]);

  return <h1>Hello</h1>;
};

export default withReCaptcha(MyPage);

TypeScript

The module is written in TypeScript and type definitions are included.

Contributing

Contributions, issues and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

LICENSE

MIT

GitHub

https://github.com/snelsi/next-recaptcha-v3
Comments
  • 1. Bump @typescript-eslint/eslint-plugin from 5.25.0 to 5.27.1

    Bumps @typescript-eslint/eslint-plugin from 5.25.0 to 5.27.1.

    Release notes

    Sourced from @​typescript-eslint/eslint-plugin's releases.

    v5.27.1

    5.27.1 (2022-06-06)

    Bug Fixes

    • eslint-plugin: [space-infix-ops] correct PropertyDefinition with typeAnnotation (#5113) (d320174)
    • eslint-plugin: [space-infix-ops] regression fix for conditional types (#5135) (e5238c8)
    • eslint-plugin: [space-infix-ops] regression fix for type aliases (#5138) (4e13deb)

    v5.27.0

    5.27.0 (2022-05-30)

    Bug Fixes

    • eslint-plugin: [no-type-alias] handle Template Literal Types (#5092) (8febf11)
    • types: remove leftovers from removal of useJSXTextNode (#5091) (f9c3647)

    Features

    • [4.7] support new extensions (#5027) (efc147b)
    • [TS4.7] support type parameters for typeof (#5067) (836de79)
    • bump dependency ranges to TypeScript 4.7 (#5082) (c4310b1)
    • eslint-plugin: [ban-ts-comment] add descriptionFormat option (#5026) (1fb31a4)
    • eslint-plugin: [no-misused-promises] warn when spreading promises (#5053) (61ffa9e)
    • eslint-plugin: [space-infix-ops] missing error report for conditional types (#5041) (0bfab6c)

    v5.26.0

    5.26.0 (2022-05-23)

    Bug Fixes

    • ast-spec: add SpreadElement to ArrayExpression.elements (#5025) (9f3121b)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected when comments after the delimiter with option delimiter: 'none' (#5029) (ed7b5f6)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected with option delimiter: 'none' (#5023) (9e97a11)
    • eslint-plugin: [prefer-readonly] correct issue with anonymus functions (#4974) (952e2f0), closes #2590

    Features

    • [TS4.7] support instantiation expressions (#4938) (79fbc77)
    • [TS4.7] support optional variance annotation (#4831) (7e7b24c)
    • [TS4.7] support extends constraints for infer (#4830) (8cbbcc3)
    Changelog

    Sourced from @​typescript-eslint/eslint-plugin's changelog.

    5.27.1 (2022-06-06)

    Bug Fixes

    • eslint-plugin: [space-infix-ops] correct PropertyDefinition with typeAnnotation (#5113) (d320174)
    • eslint-plugin: [space-infix-ops] regression fix for conditional types (#5135) (e5238c8)
    • eslint-plugin: [space-infix-ops] regression fix for type aliases (#5138) (4e13deb)

    5.27.0 (2022-05-30)

    Bug Fixes

    • eslint-plugin: [no-type-alias] handle Template Literal Types (#5092) (8febf11)

    Features

    • [4.7] support new extensions (#5027) (efc147b)
    • eslint-plugin: [ban-ts-comment] add descriptionFormat option (#5026) (1fb31a4)
    • eslint-plugin: [no-misused-promises] warn when spreading promises (#5053) (61ffa9e)
    • eslint-plugin: [space-infix-ops] missing error report for conditional types (#5041) (0bfab6c)

    5.26.0 (2022-05-23)

    Bug Fixes

    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected when comments after the delimiter with option delimiter: 'none' (#5029) (ed7b5f6)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected with option delimiter: 'none' (#5023) (9e97a11)
    • eslint-plugin: [prefer-readonly] correct issue with anonymus functions (#4974) (952e2f0), closes #2590
    Commits
    • 4e79ad2 chore: publish v5.27.1
    • 8698e80 docs(eslint-plugin): [no-extraneous-class] overhaul rule docs (#5059)
    • 4e13deb fix(eslint-plugin): [space-infix-ops] regression fix for type aliases (#5138)
    • e5238c8 fix(eslint-plugin): [space-infix-ops] regression fix for conditional types (#...
    • 45d8ad3 chore(website): automate the addition of rule attributes to the website (#5085)
    • d320174 fix(eslint-plugin): [space-infix-ops] correct PropertyDefinition with typeAnn...
    • e0db364 chore: publish v5.27.0
    • dc58ff5 docs(eslint-plugin): standardize rule description format (#4976)
    • 8febf11 fix(eslint-plugin): [no-type-alias] handle Template Literal Types (#5092)
    • 0bfab6c feat(eslint-plugin): [space-infix-ops] missing error report for conditional t...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-13 12:38
  • 2. Bump @types/node from 17.0.34 to 17.0.42

    Bumps @types/node from 17.0.34 to 17.0.42.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-13 12:38
  • 3. Bump lint-staged from 12.4.1 to 13.0.1

    Bumps lint-staged from 12.4.1 to 13.0.1.

    Release notes

    Sourced from lint-staged's releases.

    v13.0.1

    13.0.1 (2022-06-08)

    Bug Fixes

    • correct spelling of "0 files" (f27f1d4)
    • suppress error from process.kill when killing tasks on failure (f2c6bdd)
    • deps: update [email protected]^0.6.0 to fix screen size error in WSL (1a77e42)
    • ignore "No matching pid found" error (cb8a432)
    • prevent possible race condition when killing tasks on failure (bc92aff)

    Performance Improvements

    • use EventsEmitter instead of setInterval for killing tasks on failure (c508b46)

    v13.0.0

    13.0.0 (2022-06-01)

    Bug Fixes

    Features

    • remove support for Node.js 12 (5fb6df9)

    BREAKING CHANGES

    • lint-staged will no longer support Node.js 12, which is EOL since 30 April 2022

    v12.5.0

    12.5.0 (2022-05-31)

    Bug Fixes

    • include all files when using --config <path> (641d1c2)
    • skip backup stash when using the --diff option (d4da24d)

    Features

    • add --diff-filter option for overriding list of (staged) files (753ef72)
    • add --diff option for overriding list of (staged) files (35fcce9)

    ... (truncated)

    Commits
    • 4384114 refactor: reuse Listr stuff better
    • f27f1d4 fix: correct spelling of "0 files"
    • f2c6bdd fix: suppress error from process.kill when killing tasks on failure
    • c5cec0a docs: add section about task concurrency to README.md
    • 5bf1f18 docs: remove mrm from README.md
    • c508b46 perf: use EventsEmitter instead of setInterval for killing tasks on failure
    • 1a77e42 fix(deps): update [email protected]^0.6.0 to fix screen size error in WSL
    • 9e3394e chore(deps): update dependencies
    • bc92aff fix: prevent possible race condition when killing tasks on failure
    • cb8a432 fix: ignore "No matching pid found" error
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-13 12:38
  • 4. Bump @types/node from 17.0.34 to 17.0.40

    Bumps @types/node from 17.0.34 to 17.0.40.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-06 12:39
  • 5. Bump eslint from 8.15.0 to 8.17.0

    Bumps eslint from 8.15.0 to 8.17.0.

    Release notes

    Sourced from eslint's releases.

    v8.17.0

    Features

    • 55319e1 feat: fix indent bug with semicolon-first style (#15951) (Milos Djermanovic)
    • f6d7920 feat: add allowNamedExports option to no-use-before-define (#15953) (Milos Djermanovic)

    Bug Fixes

    Documentation

    • b915018 docs: Update website UI to latest (#15944) (Nicholas C. Zakas)
    • f0bb609 docs: Update Exponentiation operator MDN link (#15960) (Pranjal Jain)
    • baa0153 docs: Use correct past tense "left" instead of "leaved" (#15950) (Frederik Braun)
    • 1351a9b docs: Add Resources section to rule pages (#15901) (Nicholas C. Zakas)
    • 68cf0fb docs: cleanup typos (#15936) (Nick Schonning)
    • 13b62ae docs: use-dart-sass instead of node-sass (#15912) (Deepshika S)
    • c81c5d6 docs: add social media links (#15920) (Deepshika S)
    • 0d6a50b docs: fix openjs link (#15917) (Amaresh S M)
    • 54910f5 docs: display version in mobile view (#15909) (Amaresh S M)

    Chores

    • da694b9 chore: avoid theme flashes (#15927) (Strek)
    • f836743 chore: Use build hook for docs deploy (#15945) (Nicholas C. Zakas)
    • ce035e5 test: cleanup typos (#15937) (Nick Schonning)
    • 10249ad chore: use addEventListener instead of addListener (#15923) (Amaresh S M)
    • 5f5c1fb chore: lint eleventy config file (#15904) (Milos Djermanovic)
    • 8513d37 chore: update Rule typedefs (#15915) (Milos Djermanovic)
    • 55534f1 test: ensure no-restricted-imports works with NodeJS imports (#15907) (Nick Mazuk)

    v8.16.0

    Features

    • cab0c22 feat: add Unicode flag suggestion in no-misleading-character-class (#15867) (Milos Djermanovic)
    • 38ae956 feat: check Unicode code point escapes in no-control-regex (#15862) (Milos Djermanovic)
    • ee69cd3 feat: Update global variables (#15871) (Sébastien Règne)

    Bug Fixes

    • 3f09aab fix: function-paren-newline crash on "new new Foo();" (#15850) (coderaiser)

    Documentation

    • 050d5f4 docs: Static further reading links (#15890) (Nicholas C. Zakas)
    • 36287c0 docs: fix absolute paths in related rules shortcode to work from /docs (#15892) (Milos Djermanovic)
    • 90b6990 docs: fix absolute links in rule macro to work from /docs (#15891) (Milos Djermanovic)
    • f437249 docs: Adjust docs site path prefix (#15889) (Nicholas C. Zakas)
    • 6e16025 docs: update 'Related Rules' and 'Further Reading' in remaining rules (#15884) (Milos Djermanovic)
    • 1d39f69 docs: remove confusing examples for no-mixed-operators (#15875) (Milos Djermanovic)
    • 3071d76 docs: Fix some grammar issues (#15837) (byodian)

    Chores

    • 1768d0d chore: upgrade @​eslint/eslintrc@​1.3.0 (#15903) (Milos Djermanovic)
    • c686e4c chore: Add deploy workflow for docs site (#15894) (Nicholas C. Zakas)

    ... (truncated)

    Changelog

    Sourced from eslint's changelog.

    v8.17.0 - June 3, 2022

    • b915018 docs: Update website UI to latest (#15944) (Nicholas C. Zakas)
    • 55319e1 feat: fix indent bug with semicolon-first style (#15951) (Milos Djermanovic)
    • f6d7920 feat: add allowNamedExports option to no-use-before-define (#15953) (Milos Djermanovic)
    • f0bb609 docs: Update Exponentiation operator MDN link (#15960) (Pranjal Jain)
    • da694b9 chore: avoid theme flashes (#15927) (Strek)
    • baa0153 docs: Use correct past tense "left" instead of "leaved" (#15950) (Frederik Braun)
    • f836743 chore: Use build hook for docs deploy (#15945) (Nicholas C. Zakas)
    • ce035e5 test: cleanup typos (#15937) (Nick Schonning)
    • 1351a9b docs: Add Resources section to rule pages (#15901) (Nicholas C. Zakas)
    • 68cf0fb docs: cleanup typos (#15936) (Nick Schonning)
    • 54c0953 fix: cleanup typos (#15939) (Nick Schonning)
    • 845a7af fix: typo ocatal -> octal (#15940) (Nick Schonning)
    • 10249ad chore: use addEventListener instead of addListener (#15923) (Amaresh S M)
    • 5f5c1fb chore: lint eleventy config file (#15904) (Milos Djermanovic)
    • 8513d37 chore: update Rule typedefs (#15915) (Milos Djermanovic)
    • 13b62ae docs: use-dart-sass instead of node-sass (#15912) (Deepshika S)
    • c81c5d6 docs: add social media links (#15920) (Deepshika S)
    • 0d6a50b docs: fix openjs link (#15917) (Amaresh S M)
    • 54910f5 docs: display version in mobile view (#15909) (Amaresh S M)
    • 55534f1 test: ensure no-restricted-imports works with NodeJS imports (#15907) (Nick Mazuk)

    v8.16.0 - May 20, 2022

    • 1768d0d chore: upgrade @​eslint/eslintrc@​1.3.0 (#15903) (Milos Djermanovic)
    • 050d5f4 docs: Static further reading links (#15890) (Nicholas C. Zakas)
    • cab0c22 feat: add Unicode flag suggestion in no-misleading-character-class (#15867) (Milos Djermanovic)
    • c686e4c chore: Add deploy workflow for docs site (#15894) (Nicholas C. Zakas)
    • 38ae956 feat: check Unicode code point escapes in no-control-regex (#15862) (Milos Djermanovic)
    • 36287c0 docs: fix absolute paths in related rules shortcode to work from /docs (#15892) (Milos Djermanovic)
    • 90b6990 docs: fix absolute links in rule macro to work from /docs (#15891) (Milos Djermanovic)
    • f437249 docs: Adjust docs site path prefix (#15889) (Nicholas C. Zakas)
    • 6e16025 docs: update 'Related Rules' and 'Further Reading' in remaining rules (#15884) (Milos Djermanovic)
    • c7894cd chore: enable some rules from eslint-plugin-unicorn internally (#15878) (Bryan Mishkin)
    • ea65cb5 chore: upgrade [email protected]^4.2.0 (#15882) (唯然)
    • cc29c69 chore: Upgrade official GitHub actions to latest versions (#15880) (Darius Dzien)
    • 5891c75 chore: Refactor rule docs format (#15869) (Nicholas C. Zakas)
    • ee69cd3 feat: Update global variables (#15871) (Sébastien Règne)
    • 1d39f69 docs: remove confusing examples for no-mixed-operators (#15875) (Milos Djermanovic)
    • 3071d76 docs: Fix some grammar issues (#15837) (byodian)
    • 3f09aab fix: function-paren-newline crash on "new new Foo();" (#15850) (coderaiser)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-06 12:39
  • 6. Bump lint-staged from 12.4.1 to 13.0.0

    Bumps lint-staged from 12.4.1 to 13.0.0.

    Release notes

    Sourced from lint-staged's releases.

    v13.0.0

    13.0.0 (2022-06-01)

    Bug Fixes

    Features

    • remove support for Node.js 12 (5fb6df9)

    BREAKING CHANGES

    • lint-staged will no longer support Node.js 12, which is EOL since 30 April 2022

    v12.5.0

    12.5.0 (2022-05-31)

    Bug Fixes

    • include all files when using --config <path> (641d1c2)
    • skip backup stash when using the --diff option (d4da24d)

    Features

    • add --diff-filter option for overriding list of (staged) files (753ef72)
    • add --diff option for overriding list of (staged) files (35fcce9)

    v12.4.3

    12.4.3 (2022-05-30)

    Bug Fixes

    v12.4.2

    12.4.2 (2022-05-24)

    Bug Fixes

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-06 12:38
  • 7. Bump @typescript-eslint/eslint-plugin from 5.25.0 to 5.27.0

    Bumps @typescript-eslint/eslint-plugin from 5.25.0 to 5.27.0.

    Release notes

    Sourced from @​typescript-eslint/eslint-plugin's releases.

    v5.27.0

    5.27.0 (2022-05-30)

    Bug Fixes

    • eslint-plugin: [no-type-alias] handle Template Literal Types (#5092) (8febf11)
    • types: remove leftovers from removal of useJSXTextNode (#5091) (f9c3647)

    Features

    • [4.7] support new extensions (#5027) (efc147b)
    • [TS4.7] support type parameters for typeof (#5067) (836de79)
    • bump dependency ranges to TypeScript 4.7 (#5082) (c4310b1)
    • eslint-plugin: [ban-ts-comment] add descriptionFormat option (#5026) (1fb31a4)
    • eslint-plugin: [no-misused-promises] warn when spreading promises (#5053) (61ffa9e)
    • eslint-plugin: [space-infix-ops] missing error report for conditional types (#5041) (0bfab6c)

    v5.26.0

    5.26.0 (2022-05-23)

    Bug Fixes

    • ast-spec: add SpreadElement to ArrayExpression.elements (#5025) (9f3121b)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected when comments after the delimiter with option delimiter: 'none' (#5029) (ed7b5f6)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected with option delimiter: 'none' (#5023) (9e97a11)
    • eslint-plugin: [prefer-readonly] correct issue with anonymus functions (#4974) (952e2f0), closes #2590

    Features

    • [TS4.7] support instantiation expressions (#4938) (79fbc77)
    • [TS4.7] support optional variance annotation (#4831) (7e7b24c)
    • [TS4.7] support extends constraints for infer (#4830) (8cbbcc3)
    Changelog

    Sourced from @​typescript-eslint/eslint-plugin's changelog.

    5.27.0 (2022-05-30)

    Bug Fixes

    • eslint-plugin: [no-type-alias] handle Template Literal Types (#5092) (8febf11)

    Features

    • [4.7] support new extensions (#5027) (efc147b)
    • eslint-plugin: [ban-ts-comment] add descriptionFormat option (#5026) (1fb31a4)
    • eslint-plugin: [no-misused-promises] warn when spreading promises (#5053) (61ffa9e)
    • eslint-plugin: [space-infix-ops] missing error report for conditional types (#5041) (0bfab6c)

    5.26.0 (2022-05-23)

    Bug Fixes

    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected when comments after the delimiter with option delimiter: 'none' (#5029) (ed7b5f6)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected with option delimiter: 'none' (#5023) (9e97a11)
    • eslint-plugin: [prefer-readonly] correct issue with anonymus functions (#4974) (952e2f0), closes #2590
    Commits
    • e0db364 chore: publish v5.27.0
    • dc58ff5 docs(eslint-plugin): standardize rule description format (#4976)
    • 8febf11 fix(eslint-plugin): [no-type-alias] handle Template Literal Types (#5092)
    • 0bfab6c feat(eslint-plugin): [space-infix-ops] missing error report for conditional t...
    • 1fb31a4 feat(eslint-plugin): [ban-ts-comment] add descriptionFormat option (#5026)
    • 5586ec4 chore(eslint-plugin): fix invalid code in promise spread tests (#5072)
    • 61ffa9e feat(eslint-plugin): [no-misused-promises] warn when spreading promises (#5053)
    • efc147b feat: [4.7] support new extensions (#5027)
    • 3c0f2e3 Update ban-types.md (#5063)
    • a58a86c chore: publish v5.26.0
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-06 12:38
  • 8. Bump typescript from 4.6.4 to 4.7.3

    Bumps typescript from 4.6.4 to 4.7.3.

    Release notes

    Sourced from typescript's releases.

    TypeScript 4.7.3

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    TypeScript 4.7.2

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    TypeScript 4.7 RC

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    TypeScript 4.7 Beta

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-06 12:38
  • 9. Bump @typescript-eslint/eslint-plugin from 5.25.0 to 5.26.0

    Bumps @typescript-eslint/eslint-plugin from 5.25.0 to 5.26.0.

    Release notes

    Sourced from @​typescript-eslint/eslint-plugin's releases.

    v5.26.0

    5.26.0 (2022-05-23)

    Bug Fixes

    • ast-spec: add SpreadElement to ArrayExpression.elements (#5025) (9f3121b)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected when comments after the delimiter with option delimiter: 'none' (#5029) (ed7b5f6)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected with option delimiter: 'none' (#5023) (9e97a11)
    • eslint-plugin: [prefer-readonly] correct issue with anonymus functions (#4974) (952e2f0), closes #2590

    Features

    • [TS4.7] support instantiation expressions (#4938) (79fbc77)
    • [TS4.7] support optional variance annotation (#4831) (7e7b24c)
    • [TS4.7] support extends constraints for infer (#4830) (8cbbcc3)
    Changelog

    Sourced from @​typescript-eslint/eslint-plugin's changelog.

    5.26.0 (2022-05-23)

    Bug Fixes

    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected when comments after the delimiter with option delimiter: 'none' (#5029) (ed7b5f6)
    • eslint-plugin: [member-delimiter-style] autofixer result is not as expected with option delimiter: 'none' (#5023) (9e97a11)
    • eslint-plugin: [prefer-readonly] correct issue with anonymus functions (#4974) (952e2f0), closes #2590
    Commits
    • a58a86c chore: publish v5.26.0
    • 952e2f0 fix(eslint-plugin): [prefer-readonly] correct issue with anonymus functions (...
    • 1012e0b docs(eslint-plugin): add triple-slash-reference options schema and defaults (...
    • ed7b5f6 fix(eslint-plugin): [member-delimiter-style] autofixer result is not as expec...
    • 9e97a11 fix(eslint-plugin): [member-delimiter-style] autofixer result is not as expec...
    • 7ee0bd0 docs: [ban-types] make options description more readable (#5024)
    • 08ae2c4 chore: improve CI by making it a workflow graph (#4959)
    • 186fcf7 docs: make site build throw on broken links (#5009)
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-05-30 12:44
  • 10. Bump typescript from 4.6.4 to 4.7.2

    Bumps typescript from 4.6.4 to 4.7.2.

    Release notes

    Sourced from typescript's releases.

    TypeScript 4.7.2

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    TypeScript 4.7 RC

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    TypeScript 4.7 Beta

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-05-30 12:43
  • 11. Bump lint-staged from 12.4.1 to 12.4.3

    Bumps lint-staged from 12.4.1 to 12.4.3.

    Release notes

    Sourced from lint-staged's releases.

    v12.4.3

    12.4.3 (2022-05-30)

    Bug Fixes

    v12.4.2

    12.4.2 (2022-05-24)

    Bug Fixes

    • correctly handle --max-arg-length cli option (1db5f26)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-05-30 12:43
Veja como criei o meu portfolio! É uma Single Page Application, que foi desenvolvida utilizando Next.js
Veja como criei o meu portfolio! É uma Single Page Application, que foi desenvolvida utilizando Next.js

English Português Sobre • Funcionalidades • CI/CD • Linguagens e tecnologias utilizadas • Instalação • Telas • Licença Clique aqui para conferir o pro

May 30, 2022
📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.
📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

Dashboard Create your own team dashboard with custom widgets. Table of Contents Installation Server Development Production Docker Create a Dashboard A

Jun 24, 2022
Meditate - A meditating website to clear your mind. Built with Next.JS and TailwindCSS

A modern meditation web app for you to meditate on your own terms. Track your progress and share your thoughts with others.

Feb 3, 2022
Create a Feedback Widget for your Next.js site with two steps
Create a Feedback Widget for your Next.js site with two steps

Feedback Widget for Next.js Create a Feedback Widget for your Next.js site with two steps. See the demo 1. Frontend Install @upstash/feedback: npm ins

Jun 7, 2022
A working example of a decoupled implementation using Next.js and GraphQL with the eZ Platform CMS

Decoupled CMS example with GraphQL and Next.js This repository contains the source code for the sample application from the talk "Easy decoupled siteb

Aug 22, 2021
Airbnb UI clone using Next.js + styled-components.

Airbnb UI clone using Next.js + styled-components.

Jun 17, 2022
A simple Netflix Clone made using Next.js ⚡
A simple Netflix Clone made using Next.js ⚡

A simple Netflix Clone made using Next.js ⚡

Jun 20, 2022
🐄 Easy way to generate open-graph images dynamically using Next.js API Routes. Suitable for serverless environment.

Next.js API OG Image · Simple library with purpose of providing easy way to dynamically generate open-graph images using Next.js API routes. If you're

Jun 16, 2022
Uber Web Clone using Next.js, React.js, TailwindCSS, Firebase and Mapbox

uber-next-clone Uber Clone using Next.js, React.js, TailwindCSS, Firebase and Mapbox This is a Next.js project bootstrapped with create-next-app. Gett

Mar 26, 2022
Auth with Next.js - Authentication, Permissions and Payload Rules with Nextjs using ReactJ with Typescript
Auth with Next.js - Authentication, Permissions and Payload Rules with Nextjs using ReactJ with Typescript

Auth with Next.js ?? About Authentication, Permissions and Payload Rules with Ne

Jun 3, 2022
A simple nextjs application that showcases Game of Thrones Characters

NextThrone This sample app is built with Next.js. Clone the repo and continue with the installation Installation $ yarn Usage Replace _AUTH0_CLIENT_I

May 4, 2022
🦌 An application to stream, cast and download torrents.
🦌  An application to stream, cast and download torrents.

A torrent client to download, stream and cast torrents. Features Stream: ?? No need to wait for the torrent to download. You can stream the videos ins

Jun 20, 2022
WunderGraph Demo joining Apollo Federation (with Subscriptions), REST and GraphQL APIs and consuming it from a NextJS application
 WunderGraph Demo joining Apollo Federation (with Subscriptions), REST and GraphQL APIs and consuming it from a NextJS application

This Repository demonstrates how to combine 7 APIs (4 Apollo Federation SubGraphs, 1 REST, 1 standalone GraphQL, 1 Mock) into one unified GraphQL API which is then securely exposed as a JSON API to a NextJS Frontend.

Jun 14, 2022
JamStack application developed with NextJs integrated with GraphCms. 🚀
JamStack application developed with NextJs integrated with GraphCms. 🚀

?? Portfolio (Bio) Aplicação JamStack desenvolvida com NextJs integrado ao GraphCms. ?? Projeto | Tecnologias | Rodar Aplicação | Bibliotecas | Licenç

Apr 26, 2022
Start your own online teaching business. Features include course maker, students manager, payments and more.
Start your own online teaching business. Features include course maker, students manager, payments and more.

Website | Getting started | Documentation Introduction CourseLit is a content management system (aka CMS) for starting your own online course website.

Jun 19, 2022
A hub of all Marvel comics featuring your favorite heroes created with NextJS.
A hub of all Marvel comics featuring your favorite heroes created with NextJS.

A hub of all Marvel comics featuring your favorite heroes created with NextJS. marvel-hub.vercel.app Stack Front-end: NextJs, Jest, Styled Components

May 1, 2022
[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness

Relate Relate brings together mindfulness communities, teachers and individuals. Read the article on Medium Made with ❤︎ by Sébastien Dubois Deprecati

May 19, 2022
200 lines realtime todos app powered by next.js, preact, jet, redux and now
200 lines realtime todos app powered by next.js, preact, jet, redux and now

next-todos About 200 lines isomorphic todos app powered by next.js, redux and Jet realtime. The todos are synced between browsers. The canonical TodoA

Apr 24, 2022
100 lines of code Hackernews reader (with the help of next.js).

About This is an isomorphic react app, displaying stories from hackernews made with super nice next.js. It's just about 100 lines of code. Nothing ser

May 31, 2022