[sitecore-jss-nextjs] Link component prefetches files

CHANGELOG.md

@@ -13,6 +13,7 @@ Our versioning strategy is as follows:
 
 ### 🐛 Bug Fixes
 
+* `[sitecore-jss-nextjs]` Link component prefetches files ([#1956](https://github.com/Sitecore/jss/pull/1956))
 * `[templates/nextjs]` `[templates/react]` `[templates/angular]` `[templates/vue]` Fixed an issue when environment variable is undefined (not present in .env), that produced an "undefined" value in generated config file ([#1875](https://github.com/Sitecore/jss/pull/1875))
 * `[templates/nextjs]` Fix embedded personalization not rendering correctly after navigation through router links. ([#1911](https://github.com/Sitecore/jss/pull/1911))
 * `[template/angular]` Prevent client-side dictionary API call when SSR data is available ([#1930](https://github.com/Sitecore/jss/pull/1930)) ([#1932](https://github.com/Sitecore/jss/pull/1932))

packages/sitecore-jss-nextjs/src/components/Link.test.tsx

@@ -228,6 +228,50 @@ describe('<Link />', () => {
     expect(rendered.find(ReactLink).length).to.equal(0);
   });
 
+  describe('relative file url', () => {
+    it('should not render Next link when file url is provided', () => {
+      const field = {
+        value: {
+          href: '/foo/bar/test.html',
+          text: 'ipsum',
+          class: 'my-link',
+          title: 'My Link',
+          target: '_blank',
+        },
+      };
+      const rendered = mount(
+        <Page>
+          <Link field={field} showLinkTextWithChildrenPresent>
+            <p>Hello world...</p>
+          </Link>
+        </Page>
+      );
+      expect(rendered.find(NextLink).length).to.equal(0);
+      expect(rendered.find(ReactLink).length).to.equal(1);
+    });
+
+    it('should not render Next link when file url is provided in the root', () => {
+      const field = {
+        value: {
+          href: '/test.png',
+          text: 'ipsum',
+          class: 'my-link',
+          title: 'My Link',
+          target: '_blank',
+        },
+      };
+      const rendered = mount(
+        <Page>
+          <Link field={field} showLinkTextWithChildrenPresent>
+            <p>Hello world...</p>
+          </Link>
+        </Page>
+      );
+      expect(rendered.find(NextLink).length).to.equal(0);
+      expect(rendered.find(ReactLink).length).to.equal(1);
+    });
+  });
+
   it('should render ReactLink if link is external', () => {
     const field = {
       value: {

packages/sitecore-jss-nextjs/src/components/Link.tsx

@@ -17,6 +17,11 @@ export type LinkProps = ReactLinkProps & {
   internalLinkMatcher?: RegExp;
 };
 
+/**
+ * Matches relative URLs that end with a file extension.
+ */
+const FILE_EXTENSION_MATCHER = /^\/.*\.\w+$/;
+
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (props: LinkProps, ref): JSX.Element | null => {
     const {
@@ -50,8 +55,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     if (href && !isEditing) {
       const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
 
-      // determine if a link is a route or not.
-      if (internalLinkMatcher.test(href)) {
+      const isMatching = internalLinkMatcher.test(href);
+      const isFileUrl = FILE_EXTENSION_MATCHER.test(href);
+
+      // determine if a link is a route or not. File extensions are not routes and should not be pre-fetched.
+      if (isMatching && !isFileUrl) {
         return (
           <NextLink
             href={{ pathname: href, query: querystring, hash: anchor }}