Comments (10)
From the official NextJs documentation:
By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.
In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_
. For example:
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
This loads process.env.NEXT_PUBLIC_ANALYTICS_ID
into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the NEXT_PUBLIC_
prefix. This inlining occurs at build time, so your various NEXT_PUBLIC_
envs need to be set when the project is built.
from next-recaptcha-v3.
To fix this you should be able to just rename your RECAPTCHA_SITE_KEY
variable to NEXT_PUBLIC_RECAPTCHA_SITE_KEY
, and remove the passing of reCaptchaKey={siteKey}
param to the ReCaptchaProvider
from next-recaptcha-v3.
from next-recaptcha-v3.
Glad I could help)
Might be good to make that note in the documentation for others as well
It's already there, actually.
from next-recaptcha-v3.
Big gotcha is
This inlining occurs at build time, so your various NEXT_PUBLIC_ envs need to be set when the project is built.
So is there any better option for loading it in client?
Example usage - test site and production site (same docker image) different envs just with this siteKey.
from next-recaptcha-v3.
@petrleocompel
It's quite trivial to use any siteKey
you need. Here's some examples:
- Redefine some private env variable as public env variable in
next.config.js
:
/** @type {import('next').NextConfig} */
const nextConfig = {
env: {
NEXT_PUBLIC_RECAPTCHA_SITE_KEY: process.env.GOOGLE_CAPTCHA_SITE_KEY,
},
};
- Use build params or phase variable to handle
siteKey
innext.config.js
:
const { PHASE_DEVELOPMENT_SERVER, PHASE_TEST } = require("next/constants");
const getSiteKey = (phase) => {
switch (phase) {
case PHASE_DEVELOPMENT_SERVER:
return "dev_site_key";
case PHASE_TEST:
return "test_site_key";
default:
return "production_site_key";
}
};
/** @type {import('next').NextConfig} */
module.exports = (phase) => {
const siteKey = getSiteKey(phase);
return {
env: {
NEXT_PUBLIC_RECAPTCHA_SITE_KEY: siteKey,
},
};
};
- Define separate variable for prod and test environments, pass them to the
ReCaptchaProvider
asreCaptchaKey={siteKey}
:
next.config.js:
/** @type {import('next').NextConfig} */
const nextConfig = {
env: {
NEXT_PUBLIC_PROD_RECAPTCHA_SITE_KEY: "prod_site_key",
NEXT_PUBLIC_TEST_RECAPTCHA_SITE_KEY: "test_site_key",
NEXT_PUBLIC_DEV_RECAPTCHA_SITE_KEY: "dev_site_key",
},
};
/recaptcha.tsx
const Layout = ({ children }) => (
<ReCaptchaProvider
reCaptchaKey={
process.env.NODE_ENV === "production"
? proces.env.NEXT_PUBLIC_PROD_RECAPTCHA_SITE_KEY
: proces.env.NEXT_PUBLIC_DEV_RECAPTCHA_SITE_KEY
}
>
{children}
</ReCaptchaProvider>
);
/recaptcha.test.tsx
const Layout = ({ children }) => (
<ReCaptchaProvider
reCaptchaKey={proces.env.NEXT_PUBLIC_TEST_RECAPTCHA_SITE_KEY}
>
{children}
</ReCaptchaProvider>
);
- Just pas different
siteKey
as a param to theuseReCaptcha
hook orReCaptcha
component:
const TestForm = () => {
const { executeRecaptcha } = useReCaptcha("my_test_site_key");
return <ReCaptcha reCaptchaKey="my_other_site_key" />;
};
from next-recaptcha-v3.
@snelsi Yes I know about this workaround. But I was trying to solve providing ENV variable on deployment. Not in build. (Imagine multiple environments... This file would grow depending on number of clients).
I know that i will have to provide it to ReCaptchaProvider
but I asked if there is some smart way to do it via env.
from next-recaptcha-v3.
Most of the time, it's not a good idea to reuse the same build for different environments.
I would recommend to create a separate build for each deploy.
If you have concerns about build time / cpu usage, consider using stuff like turbopack cache / vercel remote cache
from next-recaptcha-v3.
I do not agree with you about "reusing images" that is kinda point of docker
.
from next-recaptcha-v3.
Not best solution but getServerSideProps
solves the problem. Providing the env variable to page and using it in ReCaptchaProvider
works.
from next-recaptcha-v3.
Related Issues (19)
- ReCaptcha component now showing. HOT 2
- Note: Actions might contain only alphanumeric characters, slashes, and underscores. Actions must not be user-specific. HOT 1
- Small issue on example HOT 2
- Add support for the Next 13 `app` directory HOT 1
- Next.js 13.2: Error on `executeRecaptcha` HOT 22
- recaptcha UI render all over the app HOT 2
- Documentation "Key" HOT 1
- Add support for Checkbox HOT 1
- reCaptcha script is loaded twice HOT 1
- Bump to next@14 and update deps HOT 1
- Next-recaptcha-v3 makes jest test cases fail HOT 4
- reCAPTCHA logo appears on every page across app HOT 1
- Slowed down website by 28% in PageSpeed Insights HOT 2
- Incorrect Token Format Issue with next-recaptcha-v3 HOT 2
- Why didn't version 1.4.0 publish to NPM HOT 2
- Allow to choose strategy HOT 3
- Allow Cloudflare Turnstile as ReCaptcha replacement HOT 2
- `executeRecaptcha` not referentially stable — mention in docs? HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-recaptcha-v3.