-
Hi, I am trying to setup SEO for site. It will need a full URL like : https://mysite.com/product/a-product |
Beta Was this translation helpful? Give feedback.
Replies: 10 comments 23 replies
-
Maybe use something like: More info here: https://vercel.com/docs/environment-variables |
Beta Was this translation helpful? Give feedback.
-
I created a repository to debug the env vars of the Next hosted on Vercel, and this is still a current problem... Note that |
Beta Was this translation helpful? Give feedback.
-
To anyone coming here to know how to have an env variable of NEXT_PUBLIC_URL containing:
Here's how to do it "the right way" as of September 2021. For development:
For preview URLs:
For production (yourdomain.com), create a new env variable on the Vercel dashboard, only for the production env: I wish this were easier, and we could define the main domain for a project exposed in a different env variable. Cc @leerob maybe for feedback. Thanks! Bonus: If you want to override the development defaults, use |
Beta Was this translation helpful? Give feedback.
-
currently leading to issues on auto-detecting the Vercel environment in NextAuth.js |
Beta Was this translation helpful? Give feedback.
-
Would this work? // in some util
export const getBaseUrl = () => {
if (process.env.NEXT_PUBLIC_VERCEL_ENV === "production")
return "https://your-production.url";
if (process.env.NEXT_PUBLIC_VERCEL_ENV === "preview")
return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
return "http://localhost:3000";
}; |
Beta Was this translation helpful? Give feedback.
-
adding on the code-based solution: export function getBaseUrl() {
return process.env.NEXT_PUBLIC_SITE_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL
}; Priority on environment variable, fallback to vercel's exposed url. |
Beta Was this translation helpful? Give feedback.
-
I been struging with the same thing, because My fix: Set env variable next.config.js function getBaseUrl() {
const custom = process.env.NEXT_PUBLIC_SITE_URL;
const vercel = process.env.NEXT_PUBLIC_VERCEL_URL;
if (custom) {
return custom;
} else if (vercel) {
return vercel;
} else {
return 'http://localhost:3000';
}
}
/** @type {PublicRuntimeConfig} */
const publicEnv = {
BASE_URL: getBaseUrl(),
// etc...
};
/** @type {CustomNextConfig} */
const nextConfig = {
env: publicEnv,
// etc...
} build-url.ts import getConfig from "next/config";
/**
* public facing URL including https://
*/
export const buildUrl = (path: string): string => {
const { env } = getConfig();
return env.BASE_URL + path;
} usage return NextResponse.json({
redirectTo: buildUrl("/hello"),
}); |
Beta Was this translation helpful? Give feedback.
-
In order to have the deployment URL at build-time, both locally in development mode, and when built locally, and in preview-mode pointing to the dynamic Vercel deployment, and pointing to the custom domain when deployed in production, I've resorted to use:
This is the simplest solution I've found. |
Beta Was this translation helpful? Give feedback.
-
Hey, we are using the following implementation: const VERCEL_URL = process.env.NEXT_PUBLIC_VERCEL_URL
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
: "";
const RAILWAY_STATIC_URL = process.env.RAILWAY_STATIC_URL
? `https://${process.env.RAILWAY_STATIC_URL}`
: "";
const HEROKU_URL = process.env.HEROKU_APP_NAME
? `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`
: "";
const RENDER_URL = process.env.RENDER_EXTERNAL_URL
? `https://${process.env.RENDER_EXTERNAL_URL}`
: "";
export const WEBAPP_URL =
process.env.NEXT_PUBLIC_WEBAPP_URL ||
VERCEL_URL ||
RAILWAY_STATIC_URL ||
HEROKU_URL ||
RENDER_URL ||
"http://localhost:3000"; In the local environment is should fallback to |
Beta Was this translation helpful? Give feedback.
To anyone coming here to know how to have an env variable of NEXT_PUBLIC_URL containing:
Here's how to do it "the right way" as of September 2021.
For development:
For preview URLs:
For production (yourdomain.com), create a new env variable on the Vercel dashboard, only for the production env:
I wish this were easier, and we could define the main domain for a proj…