chore: new constants and better analytics

app/sitemap.xml/route.ts

@@ -4,7 +4,7 @@ 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}`;
+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 +23,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,6 +3,16 @@
 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
+ */
+export const VERCEL_DEPLOYED =
+  process.env.VERCEL === 1 ||
+  process.env.VERCEL === '1' ||
+  process.env.VERCEL === true;
+
 /**
  * This is used for telling Next.js to to a Static Export Build of the Website
  *
@@ -13,13 +23,22 @@ 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
+ */
+export const BASE_URL = process.env.VERCEL_URL
+  ? `https://${process.env.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.
  */
-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,12 +1,18 @@
+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 * as nextConstants from '../next.constants.mjs';
 import type { AppProps } from 'next/app';
 
 import '../styles/old/index.scss';
 
+// The Vercel Analytics component should only be rendered if the current App is
+// deployed within Vercel Infrastructure. Otherwise we don't need to render this component.
+const renderVercelAnalytics = nextConstants.VERCEL_DEPLOYED && <Analytics />;
+
 const App = ({ Component, pageProps }: AppProps) => (
   <>
     <LocaleProvider>
@@ -19,6 +25,8 @@ const App = ({ Component, pageProps }: AppProps) => (
       </SiteProvider>
     </LocaleProvider>
 
+    {renderVercelAnalytics}
+
     <style jsx global>
       {`
         body {