Sometimes I want to hide url link while using GET or POST method. Whenever I used react app I would hide the url using REACT_APP_. My question is, if I am using a Next.js APP, could I use NEXT_PUBLIC_URL instead? Does both of these variable work similarly? How are they different?
React APP
axios.get(process.env.REACT_APP_URL)
Next APP
axios.get(process.env.NEXT_PUBLIC_URL)
Your react app runs on the client so there is no way to securely keep variables there.
From the docs
WARNING: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
The documentation makes it clear by referencing it as:
REACT_APP_NOT_SECRET_CODE
When you are doing process.env.REACT_APP_URL above you are not hiding anything. You requests could well be seen in Chrome Dev Tools.
Environment variables here can help in having different values of the URL for different environments eg: staging-api/dev-api/prod-api. Not for securing API keys or secrets.
Coming to your question are the two same - Yes, NEXT_PUBLIC_ is a good counter part to the react REACT_APP_. It also exposes variables to the browser and can be used for such routes etc.
Next.JS, since it runs on the server side too, gives you a way to secure your variables and not expose the browser. That is by omitting the NEXT_PUBLIC_ (so basically using the naming convention for any generic environment variable).
From the docs:
By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.
Related
Long story short, I'm trying to use the Zoom Web SDK Client. While it works in my React app, the CSS included will override almost all of my styles.
Rather than overriding my own CSS and find out what will and will not break, I tried to create a page for the zoom web sdk client using a CDN and not have the CSS touch my app's. The issue is that I need my SDK keys in my environment variables. However, process is not available to me for obvious reasons.
Is there another way to get my environment variables without spinning up a sub domain or microfrontend?
I am new to Next.js and I was looking at the Next.js deployment options https://nextjs.org/docs/deployment and I run into the following (and I guess most commonly used) options:
deployment using a Node.js server: https://nextjs.org/docs/deployment#nodejs-server
deployment using Static HTML Export: https://nextjs.org/docs/advanced-features/static-html-export#how-to-use-it
I am wondering, what is the actual difference there and how to better detect which approach should be used?
I believe Next.js' official documentation covers this properly: Advanced Features: Static HTML Export
Still some of the points that I feel should be highlighted:
Statically exporting a Next.js application via next export disables API routes (because they can't be prerendered to HTML).
next export is intended for scenarios where none of your pages have server-side data requirements (you will have to fetch all data client side or during build).
next export causes features like Incremental Static Generation/Regeneration to be disabled.
I18n routing is not supported (in static HTML export) as it requires Next.js' server-side routing.
what is the actual difference there
As the name suggests, when you are statically exporting your app, you are simply building it into a bunch of HTML, CSS, JS files, which can be hosted with ease anywhere.
On the other hand, when you are deploying on a Node.js server, you can use some more features (as mentioned above). Although ultimately HTML, CSS, JS will be sent to the browser, but before sending you can specify your logic.
You can define your APIs without a need to write the backend of your app separately. You can server-side render your page, you can fetch data, and add it to your page so that the requests are not made from client side (a necessity if you don't want to share where are you getting data from).
Also when your code is running on a Node.js server you can use the default next/image loader, it optimizes the images that you serve. In static export you need to use third party libraries [or (generally paid) loaders], or maybe manually optimize them.
which approach should be used
This is something that you need to figure out yourself. If your hosting provider restricts you to use only static assets, then you are forced to deploy site by statically exporting the HTML.
If your provider has option to deploy Node.js apps, then you need to check various parameters, like if you actually need a server to run your app, do you have some code that cannot/should not be executed on client side, ...
I have a request from a client to implement deep linking in our React application whereby clicking a link will take them directly into the installed app (potentially to a certain point but not sure on that yet).
To my understanding react-native and react-navigation both handle this as part of a feature set within "Linking" that they offer. However it seems excessive to import a framework just for deep linking (perhaps not though).
After googling I can only really find references to deep linking on react-native or react-navigation.
What is my best course of action?
Let's get to some basics first, then it will be clear.
In modern SPA's, say with React, it's common for the SPA to handle navigation itself. You need to use browser's history API. It's because your SPA is just a single index.html with bunch of js code, so it sort of virtual, every page is constructed by your app. In order to not reinvent a wheel, its easier to use some library for that, say react-router-dom.
But then everything works as expected, and you have deployed your app. When user wants to get some deep page, say, https://my-awesome-app.com/deep/page/1, browser will just send a request to a server, asking: "Please, server, give me a page 1.html, in folder page, in folder deep". But server doesn't have that file, because it has literally one index.html, because its a SPA application. Then we need to tell the server to re-write all deep routes to index html, here is an example for my app hosted on Netlify:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
When user will ask for that page, server will 'redirect' that request to the index.html and my react-router-dom will figure out which 'PageComponent' to render based on that path.
So, you can implement routing in your app yourself, probably using browser's History API, but I guess it might be easier to use library. But it's your call.
On the other hand if your app is not an SPA, the story might be different, because say in NextJS routing is implemented in framework itself, and if used deep linking would require different setup depending on how app is deployed.
Deep-linking is handled largely by Apple and Google server-side
https://www.adjust.com/blog/dive-into-deeplinking/
React-native provides extended functionality for deep-linking within mobile apps but normal web-applications there is no need to implement it there. Use universal links or Google specific links as standard linking within your web app to enable deep linking
Hi guys i try for create global variables with file .env but not works i use react native expo
i wrote process.env.API_URL but not found this variable. What i to do for works ?
I'm desesperated
I read https://www.npmjs.com/package/react-native-dotenv and https://docs.expo.io/guides/environment-variables/ but not works for me.
I need HELP !!!
https://docs.expo.io/guides/environment-variables/#the-app-manifest-env
If you have installed the expo-constants module in your managed
workflow project, you can access the app manifest's properties. One of
these properties is the .env property, a property that is only
available when running expo start. As the name suggests, it contains
some of your system-defined environment variables. For security
reasons, only the variables that starts with REACT_NATIVE_ or EXPO_
are available.
If you want the API url to be available it needs to be prefixed with REACT_NATIVE_ or EXPO_
Defined
REACT_NATIVE_API_URL=....
or
EXPO_API_URL=....
Accessed via
process.env.REACT_NATIVE_API_URL
or
process.env.EXPO_API_URL
Edit
If using the react-native-dotenv module
Usage
Add your env key-value pairs to your .env file
API_URL=....
Now import it in your .js file
import { API_URL } from 'react-native-dotenv';
I ran into so many issues getting environment variables to work. Oddly, the most highly recommended package was react-native-dotenv, and the first line of code in index.js is to require('fs'), which is a Node module that isn't available in React Native.
Anyways, I ended up creating a new context to handle Environment Variables. I don't have logic to automatically import variables based on environment, but that's as simple as commenting out one line.
Create a JSON file with your variables, import it into your context, and place it at the top of your app.js return, allowing everything in your app to consume it. From there, import it with useContext() as you would any other context, and you have access to all your variables.
Edit: After repeated issues, I decided to simply only use production variables for app testing. It's not ideal at all, but I'm sure many are in the same position as I'm in where the only real difference in variables is the route name for the API (local test server vs. production server). Unfortunately, both iOS and Android do not support http requests, or https requests with self-signed certificates without editing config files. Those config files are not available if you're using an Expo managed flow. Thus, my only choice was to simply do my testing on the production API. Luckily, I have good logs to go by, and the API itself is fairly mature and has endured plenty of testing via the web React app.
If anyone has a better solution, I'd love to hear it.
Why would someone doing SSR with Next.js use Express (or other server) instead of building and initializing with the built in next start?
The Next.js team is always working on ways to eliminate the need to use a custom server.
For example: in the past, it was required for:
static asset routing (such as robots.txt)
internationalization middleware
relay modern server
dynamic routing
Now it's just sometimes needed for middleware. Just note you could be in an old project that made that decision based on a historical need, not necessarily one that's present anymore.
Zeit themselves advertise multiple custom server examples (just search for "express").