chore: new constants and better analytics (#5475)

Author: ovflowd

app/sitemap.xml/route.ts

@@ -2,9 +2,8 @@ import { getServerSideSitemap } from 'next-sitemap';
 import * as nextDynamic from '@/next.dynamic.mjs';
 import * as nextConstants from '@/next.constants.mjs';
 
-// This is the production base domain. For the Node.js Website
-// @todo: We might store the "baseDomain" in the next constants and use it across the website
-const baseDomain = `https://nodejs.org${nextConstants.BASE_PATH}`;
+// This is the combination of the Application Base URL and Base PATH
+const canonicalUrl = `${nextConstants.BASE_URL}${nextConstants.BASE_PATH}`;
 
 // This method populates and generates the Website Sitemap by using `next-sitemap` SSR functionality
 // @see https://nextjs.org/docs/app/building-your-application/routing/router-handlers
@@ -23,7 +22,7 @@ export const GET = () => {
 
   return getServerSideSitemap(
     [...dynamicRoutes, ...staticPaths].sort().map(route => ({
-      loc: `${baseDomain}/${route}`,
+      loc: `${canonicalUrl}/${route}`,
       lastmod: currentDate,
       changefreq: 'always',
     }))

components/HtmlHead.tsx

@@ -1,16 +1,17 @@
 import Head from 'next/head';
 import { useSiteConfig } from '../hooks/useSiteConfig';
 import { useRouter } from '../hooks/useRouter';
+import { BASE_URL, BASE_PATH } from '../next.constants.mjs';
 import type { LegacyFrontMatter } from '../types';
 import type { FC } from 'react';
 
 type HeaderProps = { frontMatter: LegacyFrontMatter };
 
 const HtmlHead: FC<HeaderProps> = ({ frontMatter }) => {
   const siteConfig = useSiteConfig();
-  const { route, basePath } = useRouter();
+  const { asPath, basePath } = useRouter();
 
-  const canonicalLink = `https://nodejs.org${route}`;
+  const canonicalLink = `${BASE_URL}${BASE_PATH}${asPath}`;
 
   const pageTitle = frontMatter.title
     ? `${frontMatter.title} | ${siteConfig.title}`

next-data/generateWebsiteFeeds.mjs

@@ -11,6 +11,8 @@ import * as nextConstants from '../next.constants.mjs';
  * @param {import('../types').BlogData} blogData
  */
 const generateWebsiteFeeds = ({ posts }) => {
+  const canonicalUrl = `${nextConstants.BASE_URL}${nextConstants.BASE_PATH}/en`;
+
   /**
    * This generates all the Website RSS Feeds that are used for the website
    *
@@ -22,7 +24,7 @@ const generateWebsiteFeeds = ({ posts }) => {
         id: file,
         title: title,
         language: 'en',
-        link: `${nextConstants.BASE_PATH}/en/feed/${file}`,
+        link: `${canonicalUrl}/feed/${file}`,
         description: description || nextJson.siteConfig.description,
       });
 
@@ -33,7 +35,7 @@ const generateWebsiteFeeds = ({ posts }) => {
           title: post.title,
           author: post.author,
           date: new Date(post.date),
-          link: `${nextConstants.BASE_PATH}/en${post.slug}`,
+          link: `${canonicalUrl}${post.slug}`,
         }));
 
       blogFeedEntries.forEach(entry => feed.addItem(entry));

next.constants.mjs

@@ -3,23 +3,48 @@
 import * as nextJson from './next.json.mjs';
 import * as nextLocales from './next.locales.mjs';
 
+/**
+ * This is used for telling Next.js if the Website is deployed on Vercel
+ *
+ * Can be used for conditionally enabling features that we know are Vercel only
+ *
+ * @see https://vercel.com/docs/concepts/projects/environment-variables/system-environment-variables#framework-environment-variables
+ */
+export const VERCEL_ENV = process.env.NEXT_PUBLIC_VERCEL_ENV || undefined;
+
 /**
  * This is used for telling Next.js to to a Static Export Build of the Website
  *
  * This is used for static/without a Node.js server hosting, such as on our
  * legacy Website Build Environment on Node.js's DigitalOcean Droplet.
+ *
+ * Note that this is a manual Environment Variable defined by us during `npm run deploy`
  */
 export const ENABLE_STATIC_EXPORT =
   process.env.NEXT_STATIC_EXPORT === 'true' ||
   process.env.NEXT_STATIC_EXPORT === true;
 
+/**
+ * This is used for any place that requires the full canonical URL path for the Node.js Website (and its deployment), such as for example, the Node.js RSS Feed.
+ *
+ * This variable can either come from the Vercel Deployment as `NEXT_PUBLIC_VERCEL_URL` or from the `NEXT_BASE_URL` environment variable that is manually defined
+ * by us if necessary. Otherwise it will fallback to the default Node.js Website URL.
+ *
+ * @see https://vercel.com/docs/concepts/projects/environment-variables/system-environment-variables#framework-environment-variables
+ */
+export const BASE_URL = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : process.env.NEXT_BASE_URL || 'https://nodejs.org';
+
 /**
  * Supports a manual override of the base path of the Website
  *
  * This is useful when running the deployment on a subdirectory
  * of a domain, such as when hosted on GitHub Pages.
+ *
+ * Note that this is a manual Environment Variable defined by us if necessary.
  */
-export const BASE_PATH = String(process.env.NEXT_BASE_PATH || '');
+export const BASE_PATH = process.env.NEXT_BASE_PATH || '';
 
 /**
  * This ReGeX is used to remove the `index.md(x)` suffix of a name and to remove

pages/_app.tsx

@@ -1,8 +1,10 @@
+import { Analytics } from '@vercel/analytics/react';
 import { SiteProvider } from '../providers/siteProvider';
 import { LocaleProvider } from '../providers/localeProvider';
 import { BlogDataProvider } from '../providers/blogDataProvider';
 import { NodeReleasesProvider } from '../providers/nodeReleasesProvider';
 import { sourceSans } from '../util/nextFonts';
+import { VERCEL_ENV } from '../next.constants.mjs';
 import type { AppProps } from 'next/app';
 
 import '../styles/old/index.scss';
@@ -19,6 +21,8 @@ const App = ({ Component, pageProps }: AppProps) => (
       </SiteProvider>
     </LocaleProvider>
 
+    {VERCEL_ENV && <Analytics />}
+
     <style jsx global>
       {`
         body {