next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Published 20 hours ago • verified publisher icon vercel

feat: add support for fixedFontFamily in next/font

Open blvdmitry opened this issue 1 year ago • 23 comments

What?

Adding support for supporting a custom fontFamily name when using next/font

Why?

By default, next/font hashes the font name when generating css to achieve proper scoping. However, that makes it impossible to use next/font with 3rd party libraries that provide CSS with pre-defined font names.

How?

To solve this, I've added a new argument to the next/font function call – usedFontFamilyName. It allows developers to pick the fontFamily name that is going to be used in the CSS output instead of the default one and make it work with vendor CSS files.

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  fixedGontFamily: "Inter",
});

Fixes #43452

blvdmitry avatar Aug 05 '23 12:08 blvdmitry

Allow CI Workflow Run

  • [ ] approve CI run for commit: e8e156cecb679501c3fcfd6c242711ae6ed744f6

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk avatar Aug 05 '23 12:08 ijjk

Not exactly sure why the mdx change is failing exactly since the headings and link approach is exactly the same as for other links in the arguments table. Looking into why this might be happening but would appreciate the help in case you have more context about this.

blvdmitry avatar Aug 06 '23 20:08 blvdmitry

Fixed the documentation validation

blvdmitry avatar Aug 11 '23 11:08 blvdmitry

Great work! I suggest checking for declarations: [{ prop: 'font-family', value: 'New Name' }] to use as the font family name. If this is too messy, maybe you could rename usedFontFamilyName to usedFontFamily or fixedFontFamily as it'd bring it closer to the CSS property name

filiptdz avatar Aug 11 '23 20:08 filiptdz

In the discussion someone had issues using the declarations approach but agree that name could be shorter. I'll go through other options again once I'm back from vacation :)

Upd: Ah, that was you 😄 I think I remember better now that just redefining a property completely won't work here since it's also responsible for the font fallback so it's not correct to just set it to the fixed name for the whole property value

blvdmitry avatar Aug 18 '23 16:08 blvdmitry

Excited for this!

maccman avatar Aug 19 '23 01:08 maccman

Updated to fixedFontFamily

blvdmitry avatar Aug 30 '23 16:08 blvdmitry

@shuding @ijjk any though on the PR? It doesn't look exactly like a very urgent feature but it was requested by a bunch of people and helps a lot when using next/font with 3rd party libraries.

Anything you would expect from me to get this going further?

blvdmitry avatar Sep 01 '23 16:09 blvdmitry

I assume that in order for all the pipelines to run there should be an approval for them to start. Even if there is no time for the review right now, it would be nice if some one can do that to make sure nothing is failing outside the jobs that have passed 🙌

blvdmitry avatar Sep 25 '23 07:09 blvdmitry

Great work! I suggest checking for declarations: [{ prop: 'font-family', value: 'New Name' }] to use as the font family name. If this is too messy, maybe you could rename usedFontFamilyName to usedFontFamily or fixedFontFamily as it'd bring it closer to the CSS property name

@filiptdz

I had issues using the declarations approach. Made sense in the docs but couldn't use it: Next after building threw an error mentioning that "font-family" isn't a valid prop that be used in the declarations key. Strange because it seemed like you could override any property available in @font-face other than src I guess. Or maybe it wasn't clear in the docs as to what the restrictions were.

yashsway avatar Oct 11 '23 17:10 yashsway

Has there been any progress on the review process of this PR? Seems there are now some conflicts that must be resolved as well

IgnusG avatar Nov 23 '23 16:11 IgnusG

I can definitely resolve any conflicts but I parked it for now until there is any response from the Next.js team who can enable the rest of the CI. Most of the conflicts in this PR usually happen because fonts metadata gets updated in the main branch so it just requires me to run one script.

blvdmitry avatar Nov 23 '23 17:11 blvdmitry

Would love to see this PR merged!

dqii avatar Dec 26 '23 02:12 dqii

It's 2024 now, is there a chance we'll get a review from someone? 😄

blvdmitry avatar Jan 02 '24 17:01 blvdmitry

@sahilsarpalguru good try 😅 But I fear we need a review from one of the codeowners like @timneutkens, @ijjk, @leerob or @wyattjoh to tag a few (my apologies for the noise) to bring this PR forward

IgnusG avatar Jan 03 '24 15:01 IgnusG

tag a few (my apologies for the noise) to bri

I want the codeowners to bring the attention to this PR, I recently got blocked in this scenerios. @IgnusG btw do we have any workaround to solve this ?

sahilsarpalguru avatar Jan 03 '24 15:01 sahilsarpalguru

tag a few (my apologies for the noise) to bri

I want the codeowners to bring the attention to this PR, I recently got blocked in this scenerios. @IgnusG btw do we have any workaround to solve this ?

My workaround right now is to load the fonts manually :)

blvdmitry avatar Jan 03 '24 16:01 blvdmitry

tag a few (my apologies for the noise) to bri

I want the codeowners to bring the attention to this PR, I recently got blocked in this scenerios. @IgnusG btw do we have any workaround to solve this ?

Unfortunately none that is easy enough to integrate. What I do is to specify a CSS variable for the font and then I use a small script to replace the static font name (eg. "Inter") in my theme with the CSS variable. Of course this doesn't work if you can't modify your theme/font CSS definitions 😞

const fontInter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--token-font-inter',
  fallback: ['Helvetica', 'Arial', 'sans-serif'],
});

const fontInterDefinition = {
  name: 'Inter',
  variable: '--token-font-inter',
};

function replaceFontFamily(
  fontFamily: string,
  nextFonts: { name: string; variable: string }[],
) {
  return nextFonts.reduce((result, font) => {
    return result.replaceAll(
      new RegExp(`['"]?${font.name}['"]?`, 'g'),
      `var(${font.variable})`,
    );
  }, fontFamily);
}

export function replaceFontsWithCssVariables(
  typography: ThemeOptions['typography'], // MUI theme typography in my case
) {
  return Object.fromEntries(
    Object.entries(typography).map(([key, value]) => {
      // a bunch more checks and recursive deep merges for MUI themes

      const adjustedValue = {
        ...hasMaybeFontFamily,
        fontFamily: replaceFontFamily(hasMaybeFontFamily.fontFamily, fontDefinitions),
      };

      return [key, adjustedValue];
    }),
  )
}

This PR would simplify this to:

const fontInter = Inter({
  fixedFontName: 'Inter',
  subsets: ['latin'],
  display: 'swap',
  fallback: ['Helvetica', 'Arial', 'sans-serif'],
});

IgnusG avatar Jan 03 '24 16:01 IgnusG

Hey @ijjk, I haven't rebased it for a while since it was getting stale very quickly without being able to run the whole pipeline. Do you know if you or someone from the team will have time for a review, so I can rebase the branch and run all CI jobs?

blvdmitry avatar Jan 19 '24 20:01 blvdmitry

What's the status of this PR ? really appreciate if it could be merged.

mahmud009 avatar Feb 01 '24 19:02 mahmud009

@mahmud009 still waiting for someone with permissions to click that checkbox that unblocks the rest of the pipelines. After we get someone notice this MR – I'll rebase it again

blvdmitry avatar Feb 01 '24 19:02 blvdmitry

Aghhh Next.js has been somewhat lacking in the community handling ever since the major 13 release 😞

Rant rant rant - ignore if uninterested This issue has been open for 6 months despite many pings to many maintainers with no replies. There's another major discussion going on regarding node API support in edge runtime which after a few maintainer comments in the beginning now is completely ignored too with only pings every couple of days begging for input.

Just the other day a blog post on an App router migration came out that identified major deficiencies in the way Next.js handles their feature development. Left and right everywhere I look people just suggest remix and building more and more adapters to simplify migrations over to it. It's like the framework is slowly eating itself alive or perhaps Vercel bit more than it can chew with the whole turbo effort and now there's no more maintainers to look after the core framework 😢

IgnusG avatar Feb 01 '24 20:02 IgnusG

I will be taking a look at this! :eyeses:

samcx avatar Feb 05 '24 03:02 samcx

Thanks @samcx, I will rebase today in the evening then since I have to regenerate the available google fonts every now and then. Let me know if there are any other things you would need to be updated along the way 🙌

blvdmitry avatar Feb 05 '24 09:02 blvdmitry

Updated the generated fonts

blvdmitry avatar Feb 05 '24 19:02 blvdmitry

Stats from current PR

Default Build (Increase detected ⚠️)
General
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
buildDuration 15.6s 14.2s N/A
buildDurationCached 7.8s 6.8s N/A
nodeModulesSize 345 MB 345 MB N/A
nextStartRea..uration (ms) 408ms 407ms N/A
Client Bundles (main, webpack)
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
1813.HASH.js gzip 169 B 169 B ✓
3433-HASH.js gzip 5.06 kB 5.06 kB N/A
6159-HASH.js gzip 33.5 kB 33.5 kB N/A
69089819-HASH.js gzip 50.8 kB 50.8 kB N/A
framework-HASH.js gzip 55.8 kB 55.8 kB N/A
main-app-HASH.js gzip 220 B 221 B N/A
main-HASH.js gzip 32.3 kB 32.3 kB N/A
webpack-HASH.js gzip 1.71 kB 1.7 kB N/A
Overall change 169 B 169 B ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
_app-HASH.js gzip 192 B 193 B N/A
_error-HASH.js gzip 192 B 192 B ✓
amp-HASH.js gzip 511 B 510 B N/A
css-HASH.js gzip 342 B 343 B N/A
dynamic-HASH.js gzip 2.53 kB 2.52 kB N/A
edge-ssr-HASH.js gzip 265 B 266 B N/A
head-HASH.js gzip 362 B 364 B N/A
hooks-HASH.js gzip 391 B 392 B N/A
image-HASH.js gzip 4.27 kB 4.27 kB N/A
index-HASH.js gzip 269 B 268 B N/A
link-HASH.js gzip 2.69 kB 2.69 kB N/A
routerDirect..HASH.js gzip 328 B 329 B N/A
script-HASH.js gzip 393 B 397 B N/A
withRouter-HASH.js gzip 325 B 324 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 298 B 298 B ✓
Client Build Manifests
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
_buildManifest.js gzip 482 B 483 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
index.html gzip 521 B 522 B N/A
link.html gzip 535 B 536 B N/A
withRouter.html gzip 517 B 517 B ✓
Overall change 517 B 517 B ✓
Edge SSR bundle Size
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
edge-ssr.js gzip 120 kB 120 kB N/A
page.js gzip 179 kB 179 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
middleware-b..fest.js gzip 656 B 658 B N/A
middleware-r..fest.js gzip 155 B 153 B N/A
middleware.js gzip 26 kB 26 kB N/A
edge-runtime..pack.js gzip 839 B 839 B ✓
Overall change 839 B 839 B ✓
Next Runtimes
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
app-page-exp...dev.js gzip 173 kB 173 kB ✓
app-page-exp..prod.js gzip 105 kB 105 kB ✓
app-page-tur..prod.js gzip 114 kB 114 kB ✓
app-page-tur..prod.js gzip 94.1 kB 94.1 kB ✓
app-page.run...dev.js gzip 159 kB 159 kB ✓
app-page.run..prod.js gzip 92.8 kB 92.8 kB ✓
app-route-ex...dev.js gzip 20.9 kB 20.9 kB ✓
app-route-ex..prod.js gzip 14.9 kB 14.9 kB ✓
app-route-tu..prod.js gzip 15 kB 15 kB ✓
app-route-tu..prod.js gzip 14.8 kB 14.8 kB ✓
app-route.ru...dev.js gzip 20.7 kB 20.7 kB ✓
app-route.ru..prod.js gzip 14.8 kB 14.8 kB ✓
pages-api-tu..prod.js gzip 9.53 kB 9.53 kB ✓
pages-api.ru...dev.js gzip 9.8 kB 9.8 kB ✓
pages-api.ru..prod.js gzip 9.53 kB 9.53 kB ✓
pages-turbo...prod.js gzip 21.4 kB 21.4 kB ✓
pages.runtim...dev.js gzip 22 kB 22 kB ✓
pages.runtim..prod.js gzip 21.4 kB 21.4 kB ✓
server.runti..prod.js gzip 51.8 kB 51.8 kB ✓
Overall change 986 kB 986 kB ✓
build cache Overall increase ⚠️
vercel/next.js canary blvdmitry/next.js next-font-fixed-name Change
0.pack gzip 1.64 MB 1.64 MB ⚠️ +310 B
index.pack gzip 127 kB 127 kB ⚠️ +569 B
Overall change 1.77 MB 1.77 MB ⚠️ +879 B
Diff details
Diff for page.js 
@@ -15,7 +15,7 @@
       /***/
     },
 
-    /***/ 4558: /***/ (
+    /***/ 5971: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -30,7 +30,7 @@
         default: () => /* binding */ nHandler,
       });
 
-      // NAMESPACE OBJECT: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-stats564p5G%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
+      // NAMESPACE OBJECT: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-stats564p5G%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
       var page_next_edge_ssr_entry_namespaceObject = {};
       __webpack_require__.r(page_next_edge_ssr_entry_namespaceObject);
       __webpack_require__.d(page_next_edge_ssr_entry_namespaceObject, {
@@ -68,24 +68,24 @@
         tree: () => tree,
       });
 
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/web/globals.js
-      var globals = __webpack_require__(5107);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/web/adapter.js + 3 modules
-      var adapter = __webpack_require__(6713);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js + 87 modules
-      var render = __webpack_require__(6526);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/lib/incremental-cache/index.js + 3 modules
-      var incremental_cache = __webpack_require__(2116);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/app-render/app-render.js + 52 modules
-      var app_render = __webpack_require__(7906);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/future/route-modules/app-page/module.compiled.js
-      var module_compiled = __webpack_require__(4445);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/future/route-kind.js
-      var route_kind = __webpack_require__(8063);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/client/components/error-boundary.js
-      var error_boundary = __webpack_require__(3483);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/app-render/entry-base.js + 9 modules
-      var entry_base = __webpack_require__(7165); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-stats564p5G%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/web/globals.js
+      var globals = __webpack_require__(4009);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/web/adapter.js + 3 modules
+      var adapter = __webpack_require__(6978);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js + 87 modules
+      var render = __webpack_require__(8791);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/lib/incremental-cache/index.js + 3 modules
+      var incremental_cache = __webpack_require__(994);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/app-render/app-render.js + 52 modules
+      var app_render = __webpack_require__(3653);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/future/route-modules/app-page/module.compiled.js
+      var module_compiled = __webpack_require__(8414);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/future/route-kind.js
+      var route_kind = __webpack_require__(2229);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/client/components/error-boundary.js
+      var error_boundary = __webpack_require__(8002);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/app-render/entry-base.js + 9 modules
+      var entry_base = __webpack_require__(7832); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-stats564p5G%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
       ("TURBOPACK { transition: next-ssr }");
 
       // We inject the tree and pages here so that we can use them in the route
@@ -104,7 +104,7 @@
                     page: [
                       () =>
                         Promise.resolve(/* import() eager */).then(
-                          __webpack_require__.bind(__webpack_require__, 4791)
+                          __webpack_require__.bind(__webpack_require__, 3053)
                         ),
                       "/tmp/next-stats564p5G/stats-app/app/app-edge-ssr/page.js",
                     ],
@@ -118,14 +118,14 @@
             layout: [
               () =>
                 Promise.resolve(/* import() eager */).then(
-                  __webpack_require__.bind(__webpack_require__, 9469)
+                  __webpack_require__.bind(__webpack_require__, 9363)
                 ),
               "/tmp/next-stats564p5G/stats-app/app/layout.js",
             ],
             "not-found": [
               () =>
                 Promise.resolve(/* import() eager */).then(
-                  __webpack_require__.bind(__webpack_require__, 3048)
+                  __webpack_require__.bind(__webpack_require__, 6385)
                 ),
               "next/dist/client/components/not-found-error",
             ],
@@ -161,12 +161,12 @@
       });
 
       //# sourceMappingURL=app-page.js.map
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/lib/page-types.js
-      var page_types = __webpack_require__(3047);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/app-render/encryption-utils.js
-      var encryption_utils = __webpack_require__(866);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/app-render/action-utils.js
-      var action_utils = __webpack_require__(2041); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?{"absolute500Path":"","absoluteAppPath":"next/dist/pages/_app","absoluteDocumentPath":"next/dist/pages/_document","absoluteErrorPath":"next/dist/pages/_error","absolutePagePath":"private-next-app-dir/app-edge-ssr/page.js","dev":false,"isServerComponent":true,"page":"/app-edge-ssr/page","stringifiedConfig":"eyJlbnYiOnt9LCJlc2xpbnQiOnsiaWdub3JlRHVyaW5nQnVpbGRzIjpmYWxzZX0sInR5cGVzY3JpcHQiOnsiaWdub3JlQnVpbGRFcnJvcnMiOmZhbHNlLCJ0c2NvbmZpZ1BhdGgiOiJ0c2NvbmZpZy5qc29uIn0sImRpc3REaXIiOiIubmV4dCIsImNsZWFuRGlzdERpciI6dHJ1ZSwiYXNzZXRQcmVmaXgiOiIiLCJjYWNoZU1heE1lbW9yeVNpemUiOjUyNDI4ODAwLCJjb25maWdPcmlnaW4iOiJuZXh0LmNvbmZpZy5qcyIsInVzZUZpbGVTeXN0ZW1QdWJsaWNSb3V0ZXMiOnRydWUsImdlbmVyYXRlRXRhZ3MiOnRydWUsInBhZ2VFeHRlbnNpb25zIjpbInRzeCIsInRzIiwianN4IiwianMiXSwicG93ZXJlZEJ5SGVhZGVyIjp0cnVlLCJjb21wcmVzcyI6dHJ1ZSwiaW1hZ2VzIjp7ImRldmljZVNpemVzIjpbNjQwLDc1MCw4MjgsMTA4MCwxMjAwLDE5MjAsMjA0OCwzODQwXSwiaW1hZ2VTaXplcyI6WzE2LDMyLDQ4LDY0LDk2LDEyOCwyNTYsMzg0XSwicGF0aCI6Ii9fbmV4dC9pbWFnZSIsImxvYWRlciI6ImRlZmF1bHQiLCJsb2FkZXJGaWxlIjoiIiwiZG9tYWlucyI6W10sImRpc2FibGVTdGF0aWNJbWFnZXMiOmZhbHNlLCJtaW5pbXVtQ2FjaGVUVEwiOjYwLCJmb3JtYXRzIjpbImltYWdlL3dlYnAiXSwiZGFuZ2Vyb3VzbHlBbGxvd1NWRyI6ZmFsc2UsImNvbnRlbnRTZWN1cml0eVBvbGljeSI6InNjcmlwdC1zcmMgJ25vbmUnOyBmcmFtZS1zcmMgJ25vbmUnOyBzYW5kYm94OyIsImNvbnRlbnREaXNwb3NpdGlvblR5cGUiOiJhdHRhY2htZW50IiwicmVtb3RlUGF0dGVybnMiOltdLCJ1bm9wdGltaXplZCI6ZmFsc2V9LCJkZXZJbmRpY2F0b3JzIjp7ImJ1aWxkQWN0aXZpdHkiOnRydWUsImJ1aWxkQWN0aXZpdHlQb3NpdGlvbiI6ImJvdHRvbS1yaWdodCJ9LCJvbkRlbWFuZEVudHJpZXMiOnsibWF4SW5hY3RpdmVBZ2UiOjYwMDAwLCJwYWdlc0J1ZmZlckxlbmd0aCI6NX0sImFtcCI6eyJjYW5vbmljYWxCYXNlIjoiIn0sImJhc2VQYXRoIjoiIiwic2Fzc09wdGlvbnMiOnt9LCJ0cmFpbGluZ1NsYXNoIjpmYWxzZSwiaTE4biI6bnVsbCwicHJvZHVjdGlvbkJyb3dzZXJTb3VyY2VNYXBzIjpmYWxzZSwib3B0aW1pemVGb250cyI6dHJ1ZSwiZXhjbHVkZURlZmF1bHRNb21lbnRMb2NhbGVzIjp0cnVlLCJzZXJ2ZXJSdW50aW1lQ29uZmlnIjp7fSwicHVibGljUnVudGltZUNvbmZpZyI6e30sInJlYWN0UHJvZHVjdGlvblByb2ZpbGluZyI6ZmFsc2UsInJlYWN0U3RyaWN0TW9kZSI6bnVsbCwiaHR0cEFnZW50T3B0aW9ucyI6eyJrZWVwQWxpdmUiOnRydWV9LCJzdGF0aWNQYWdlR2VuZXJhdGlvblRpbWVvdXQiOjYwLCJtb2R1bGFyaXplSW1wb3J0cyI6eyJAbXVpL2ljb25zLW1hdGVyaWFsIjp7InRyYW5zZm9ybSI6IkBtdWkvaWNvbnMtbWF0ZXJpYWwve3ttZW1iZXJ9fSJ9LCJsb2Rhc2giOnsidHJhbnNmb3JtIjoibG9kYXNoL3t7bWVtYmVyfX0ifX0sImV4cGVyaW1lbnRhbCI6eyJmbHlpbmdTaHV0dGxlIjpmYWxzZSwicHJlcmVuZGVyRWFybHlFeGl0IjpmYWxzZSwic2VydmVyTWluaWZpY2F0aW9uIjp0cnVlLCJzZXJ2ZXJTb3VyY2VNYXBzIjpmYWxzZSwibGlua05vVG91Y2hTdGFydCI6ZmFsc2UsImNhc2VTZW5zaXRpdmVSb3V0ZXMiOmZhbHNlLCJwcmVsb2FkRW50cmllc09uU3RhcnQiOnRydWUsImNsaWVudFJvdXRlckZpbHRlciI6dHJ1ZSwiY2xpZW50Um91dGVyRmlsdGVyUmVkaXJlY3RzIjpmYWxzZSwiZmV0Y2hDYWNoZUtleVByZWZpeCI6IiIsIm1pZGRsZXdhcmVQcmVmZXRjaCI6ImZsZXhpYmxlIiwib3B0aW1pc3RpY0NsaWVudENhY2hlIjp0cnVlLCJtYW51YWxDbGllbnRCYXNlUGF0aCI6ZmFsc2UsImNwdXMiOjE5LCJtZW1vcnlCYXNlZFdvcmtlcnNDb3VudCI6ZmFsc2UsImlzckZsdXNoVG9EaXNrIjp0cnVlLCJ3b3JrZXJUaHJlYWRzIjpmYWxzZSwib3B0aW1pemVDc3MiOmZhbHNlLCJuZXh0U2NyaXB0V29ya2VycyI6ZmFsc2UsInNjcm9sbFJlc3RvcmF0aW9uIjpmYWxzZSwiZXh0ZXJuYWxEaXIiOmZhbHNlLCJkaXNhYmxlT3B0aW1pemVkTG9hZGluZyI6ZmFsc2UsImd6aXBTaXplIjp0cnVlLCJjcmFDb21wYXQiOmZhbHNlLCJlc21FeHRlcm5hbHMiOnRydWUsImZ1bGx5U3BlY2lmaWVkIjpmYWxzZSwib3V0cHV0RmlsZVRyYWNpbmdSb290IjoiL3RtcC9uZXh0LXN0YXRzNTY0cDVHL3N0YXRzLWFwcCIsInN3Y1RyYWNlUHJvZmlsaW5nIjpmYWxzZSwiZm9yY2VTd2NUcmFuc2Zvcm1zIjpmYWxzZSwibGFyZ2VQYWdlRGF0YUJ5dGVzIjoxMjgwMDAsImFkanVzdEZvbnRGYWxsYmFja3MiOmZhbHNlLCJhZGp1c3RGb250RmFsbGJhY2tzV2l0aFNpemVBZGp1c3QiOmZhbHNlLCJ0eXBlZFJvdXRlcyI6ZmFsc2UsImluc3RydW1lbnRhdGlvbkhvb2siOmZhbHNlLCJwYXJhbGxlbFNlcnZlckNvbXBpbGVzIjpmYWxzZSwicGFyYWxsZWxTZXJ2ZXJCdWlsZFRyYWNlcyI6ZmFsc2UsInBwciI6ZmFsc2UsIm9wdGltaXplU2VydmVyUmVhY3QiOnRydWUsInVzZUVhcmx5SW1wb3J0IjpmYWxzZSwic3RhbGVUaW1lcyI6eyJkeW5hbWljIjozMCwic3RhdGljIjozMDB9LCJvcHRpbWl6ZVBhY2thZ2VJbXBvcnRzIjpbImx1Y2lkZS1yZWFjdCIsImRhdGUtZm5zIiwibG9kYXNoLWVzIiwicmFtZGEiLCJhbnRkIiwicmVhY3QtYm9vdHN0cmFwIiwiYWhvb2tzIiwiQGFudC1kZXNpZ24vaWNvbnMiLCJAaGVhZGxlc3N1aS9yZWFjdCIsIkBoZWFkbGVzc3VpLWZsb2F0L3JlYWN0IiwiQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZCIsIkBoZXJvaWNvbnMvcmVhY3QvMjQvc29saWQiLCJAaGVyb2ljb25zL3JlYWN0LzI0L291dGxpbmUiLCJAdmlzeC92aXN4IiwiQHRyZW1vci9yZWFjdCIsInJ4anMiLCJAbXVpL21hdGVyaWFsIiwiQG11aS9pY29ucy1tYXRlcmlhbCIsInJlY2hhcnRzIiwicmVhY3QtdXNlIiwiQG1hdGVyaWFsLXVpL2NvcmUiLCJAbWF0ZXJpYWwtdWkvaWNvbnMiLCJAdGFibGVyL2ljb25zLXJlYWN0IiwibXVpLWNvcmUiLCJyZWFjdC1pY29ucy9haSIsInJlYWN0LWljb25zL2JpIiwicmVhY3QtaWNvbnMvYnMiLCJyZWFjdC1pY29ucy9jZyIsInJlYWN0LWljb25zL2NpIiwicmVhY3QtaWNvbnMvZGkiLCJyZWFjdC1pY29ucy9mYSIsInJlYWN0LWljb25zL2ZhNiIsInJlYWN0LWljb25zL2ZjIiwicmVhY3QtaWNvbnMvZmkiLCJyZWFjdC1pY29ucy9naSIsInJlYWN0LWljb25zL2dvIiwicmVhY3QtaWNvbnMvZ3IiLCJyZWFjdC1pY29ucy9oaSIsInJlYWN0LWljb25zL2hpMiIsInJlYWN0LWljb25zL2ltIiwicmVhY3QtaWNvbnMvaW8iLCJyZWFjdC1pY29ucy9pbzUiLCJyZWFjdC1pY29ucy9saWEiLCJyZWFjdC1pY29ucy9saWIiLCJyZWFjdC1pY29ucy9sdSIsInJlYWN0LWljb25zL21kIiwicmVhY3QtaWNvbnMvcGkiLCJyZWFjdC1pY29ucy9yaSIsInJlYWN0LWljb25zL3J4IiwicmVhY3QtaWNvbnMvc2kiLCJyZWFjdC1pY29ucy9zbCIsInJlYWN0LWljb25zL3RiIiwicmVhY3QtaWNvbnMvdGZpIiwicmVhY3QtaWNvbnMvdGkiLCJyZWFjdC1pY29ucy92c2MiLCJyZWFjdC1pY29ucy93aSJdfSwiYnVuZGxlUGFnZXNSb3V0ZXJEZXBlbmRlbmNpZXMiOmZhbHNlLCJjb25maWdGaWxlIjoiL3RtcC9uZXh0LXN0YXRzNTY0cDVHL3N0YXRzLWFwcC9uZXh0LmNvbmZpZy5qcyIsImNvbmZpZ0ZpbGVOYW1lIjoibmV4dC5jb25maWcuanMifQ==","pagesType":"app","appDirLoader":"bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGYXBwLWVkZ2Utc3NyJTJGcGFnZSZwYWdlPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZVBhdGg9cHJpdmF0ZS1uZXh0LWFwcC1kaXIlMkZhcHAtZWRnZS1zc3IlMkZwYWdlLmpzJmFwcERpcj0lMkZ0bXAlMkZuZXh0LXN0YXRzNTY0cDVHJTJGc3RhdHMtYXBwJTJGYXBwJmFwcFBhdGhzPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh","sriEnabled":false,"middlewareConfig":"e30="}!
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/lib/page-types.js
+      var page_types = __webpack_require__(9287);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/app-render/encryption-utils.js
+      var encryption_utils = __webpack_require__(3934);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/app-render/action-utils.js
+      var action_utils = __webpack_require__(1730); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?{"absolute500Path":"","absoluteAppPath":"next/dist/pages/_app","absoluteDocumentPath":"next/dist/pages/_document","absoluteErrorPath":"next/dist/pages/_error","absolutePagePath":"private-next-app-dir/app-edge-ssr/page.js","dev":false,"isServerComponent":true,"page":"/app-edge-ssr/page","stringifiedConfig":"eyJlbnYiOnt9LCJlc2xpbnQiOnsiaWdub3JlRHVyaW5nQnVpbGRzIjpmYWxzZX0sInR5cGVzY3JpcHQiOnsiaWdub3JlQnVpbGRFcnJvcnMiOmZhbHNlLCJ0c2NvbmZpZ1BhdGgiOiJ0c2NvbmZpZy5qc29uIn0sImRpc3REaXIiOiIubmV4dCIsImNsZWFuRGlzdERpciI6dHJ1ZSwiYXNzZXRQcmVmaXgiOiIiLCJjYWNoZU1heE1lbW9yeVNpemUiOjUyNDI4ODAwLCJjb25maWdPcmlnaW4iOiJuZXh0LmNvbmZpZy5qcyIsInVzZUZpbGVTeXN0ZW1QdWJsaWNSb3V0ZXMiOnRydWUsImdlbmVyYXRlRXRhZ3MiOnRydWUsInBhZ2VFeHRlbnNpb25zIjpbInRzeCIsInRzIiwianN4IiwianMiXSwicG93ZXJlZEJ5SGVhZGVyIjp0cnVlLCJjb21wcmVzcyI6dHJ1ZSwiaW1hZ2VzIjp7ImRldmljZVNpemVzIjpbNjQwLDc1MCw4MjgsMTA4MCwxMjAwLDE5MjAsMjA0OCwzODQwXSwiaW1hZ2VTaXplcyI6WzE2LDMyLDQ4LDY0LDk2LDEyOCwyNTYsMzg0XSwicGF0aCI6Ii9fbmV4dC9pbWFnZSIsImxvYWRlciI6ImRlZmF1bHQiLCJsb2FkZXJGaWxlIjoiIiwiZG9tYWlucyI6W10sImRpc2FibGVTdGF0aWNJbWFnZXMiOmZhbHNlLCJtaW5pbXVtQ2FjaGVUVEwiOjYwLCJmb3JtYXRzIjpbImltYWdlL3dlYnAiXSwiZGFuZ2Vyb3VzbHlBbGxvd1NWRyI6ZmFsc2UsImNvbnRlbnRTZWN1cml0eVBvbGljeSI6InNjcmlwdC1zcmMgJ25vbmUnOyBmcmFtZS1zcmMgJ25vbmUnOyBzYW5kYm94OyIsImNvbnRlbnREaXNwb3NpdGlvblR5cGUiOiJhdHRhY2htZW50IiwicmVtb3RlUGF0dGVybnMiOltdLCJ1bm9wdGltaXplZCI6ZmFsc2V9LCJkZXZJbmRpY2F0b3JzIjp7ImJ1aWxkQWN0aXZpdHkiOnRydWUsImJ1aWxkQWN0aXZpdHlQb3NpdGlvbiI6ImJvdHRvbS1yaWdodCJ9LCJvbkRlbWFuZEVudHJpZXMiOnsibWF4SW5hY3RpdmVBZ2UiOjYwMDAwLCJwYWdlc0J1ZmZlckxlbmd0aCI6NX0sImFtcCI6eyJjYW5vbmljYWxCYXNlIjoiIn0sImJhc2VQYXRoIjoiIiwic2Fzc09wdGlvbnMiOnt9LCJ0cmFpbGluZ1NsYXNoIjpmYWxzZSwiaTE4biI6bnVsbCwicHJvZHVjdGlvbkJyb3dzZXJTb3VyY2VNYXBzIjpmYWxzZSwib3B0aW1pemVGb250cyI6dHJ1ZSwiZXhjbHVkZURlZmF1bHRNb21lbnRMb2NhbGVzIjp0cnVlLCJzZXJ2ZXJSdW50aW1lQ29uZmlnIjp7fSwicHVibGljUnVudGltZUNvbmZpZyI6e30sInJlYWN0UHJvZHVjdGlvblByb2ZpbGluZyI6ZmFsc2UsInJlYWN0U3RyaWN0TW9kZSI6bnVsbCwiaHR0cEFnZW50T3B0aW9ucyI6eyJrZWVwQWxpdmUiOnRydWV9LCJzdGF0aWNQYWdlR2VuZXJhdGlvblRpbWVvdXQiOjYwLCJtb2R1bGFyaXplSW1wb3J0cyI6eyJAbXVpL2ljb25zLW1hdGVyaWFsIjp7InRyYW5zZm9ybSI6IkBtdWkvaWNvbnMtbWF0ZXJpYWwve3ttZW1iZXJ9fSJ9LCJsb2Rhc2giOnsidHJhbnNmb3JtIjoibG9kYXNoL3t7bWVtYmVyfX0ifX0sImV4cGVyaW1lbnRhbCI6eyJmbHlpbmdTaHV0dGxlIjpmYWxzZSwicHJlcmVuZGVyRWFybHlFeGl0IjpmYWxzZSwic2VydmVyTWluaWZpY2F0aW9uIjp0cnVlLCJzZXJ2ZXJTb3VyY2VNYXBzIjpmYWxzZSwibGlua05vVG91Y2hTdGFydCI6ZmFsc2UsImNhc2VTZW5zaXRpdmVSb3V0ZXMiOmZhbHNlLCJwcmVsb2FkRW50cmllc09uU3RhcnQiOnRydWUsImNsaWVudFJvdXRlckZpbHRlciI6dHJ1ZSwiY2xpZW50Um91dGVyRmlsdGVyUmVkaXJlY3RzIjpmYWxzZSwiZmV0Y2hDYWNoZUtleVByZWZpeCI6IiIsIm1pZGRsZXdhcmVQcmVmZXRjaCI6ImZsZXhpYmxlIiwib3B0aW1pc3RpY0NsaWVudENhY2hlIjp0cnVlLCJtYW51YWxDbGllbnRCYXNlUGF0aCI6ZmFsc2UsImNwdXMiOjE5LCJtZW1vcnlCYXNlZFdvcmtlcnNDb3VudCI6ZmFsc2UsImlzckZsdXNoVG9EaXNrIjp0cnVlLCJ3b3JrZXJUaHJlYWRzIjpmYWxzZSwib3B0aW1pemVDc3MiOmZhbHNlLCJuZXh0U2NyaXB0V29ya2VycyI6ZmFsc2UsInNjcm9sbFJlc3RvcmF0aW9uIjpmYWxzZSwiZXh0ZXJuYWxEaXIiOmZhbHNlLCJkaXNhYmxlT3B0aW1pemVkTG9hZGluZyI6ZmFsc2UsImd6aXBTaXplIjp0cnVlLCJjcmFDb21wYXQiOmZhbHNlLCJlc21FeHRlcm5hbHMiOnRydWUsImZ1bGx5U3BlY2lmaWVkIjpmYWxzZSwib3V0cHV0RmlsZVRyYWNpbmdSb290IjoiL3RtcC9uZXh0LXN0YXRzNTY0cDVHL3N0YXRzLWFwcCIsInN3Y1RyYWNlUHJvZmlsaW5nIjpmYWxzZSwiZm9yY2VTd2NUcmFuc2Zvcm1zIjpmYWxzZSwibGFyZ2VQYWdlRGF0YUJ5dGVzIjoxMjgwMDAsImFkanVzdEZvbnRGYWxsYmFja3MiOmZhbHNlLCJhZGp1c3RGb250RmFsbGJhY2tzV2l0aFNpemVBZGp1c3QiOmZhbHNlLCJ0eXBlZFJvdXRlcyI6ZmFsc2UsImluc3RydW1lbnRhdGlvbkhvb2siOmZhbHNlLCJwYXJhbGxlbFNlcnZlckNvbXBpbGVzIjpmYWxzZSwicGFyYWxsZWxTZXJ2ZXJCdWlsZFRyYWNlcyI6ZmFsc2UsInBwciI6ZmFsc2UsIm9wdGltaXplU2VydmVyUmVhY3QiOnRydWUsInVzZUVhcmx5SW1wb3J0IjpmYWxzZSwic3RhbGVUaW1lcyI6eyJkeW5hbWljIjozMCwic3RhdGljIjozMDB9LCJvcHRpbWl6ZVBhY2thZ2VJbXBvcnRzIjpbImx1Y2lkZS1yZWFjdCIsImRhdGUtZm5zIiwibG9kYXNoLWVzIiwicmFtZGEiLCJhbnRkIiwicmVhY3QtYm9vdHN0cmFwIiwiYWhvb2tzIiwiQGFudC1kZXNpZ24vaWNvbnMiLCJAaGVhZGxlc3N1aS9yZWFjdCIsIkBoZWFkbGVzc3VpLWZsb2F0L3JlYWN0IiwiQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZCIsIkBoZXJvaWNvbnMvcmVhY3QvMjQvc29saWQiLCJAaGVyb2ljb25zL3JlYWN0LzI0L291dGxpbmUiLCJAdmlzeC92aXN4IiwiQHRyZW1vci9yZWFjdCIsInJ4anMiLCJAbXVpL21hdGVyaWFsIiwiQG11aS9pY29ucy1tYXRlcmlhbCIsInJlY2hhcnRzIiwicmVhY3QtdXNlIiwiQG1hdGVyaWFsLXVpL2NvcmUiLCJAbWF0ZXJpYWwtdWkvaWNvbnMiLCJAdGFibGVyL2ljb25zLXJlYWN0IiwibXVpLWNvcmUiLCJyZWFjdC1pY29ucy9haSIsInJlYWN0LWljb25zL2JpIiwicmVhY3QtaWNvbnMvYnMiLCJyZWFjdC1pY29ucy9jZyIsInJlYWN0LWljb25zL2NpIiwicmVhY3QtaWNvbnMvZGkiLCJyZWFjdC1pY29ucy9mYSIsInJlYWN0LWljb25zL2ZhNiIsInJlYWN0LWljb25zL2ZjIiwicmVhY3QtaWNvbnMvZmkiLCJyZWFjdC1pY29ucy9naSIsInJlYWN0LWljb25zL2dvIiwicmVhY3QtaWNvbnMvZ3IiLCJyZWFjdC1pY29ucy9oaSIsInJlYWN0LWljb25zL2hpMiIsInJlYWN0LWljb25zL2ltIiwicmVhY3QtaWNvbnMvaW8iLCJyZWFjdC1pY29ucy9pbzUiLCJyZWFjdC1pY29ucy9saWEiLCJyZWFjdC1pY29ucy9saWIiLCJyZWFjdC1pY29ucy9sdSIsInJlYWN0LWljb25zL21kIiwicmVhY3QtaWNvbnMvcGkiLCJyZWFjdC1pY29ucy9yaSIsInJlYWN0LWljb25zL3J4IiwicmVhY3QtaWNvbnMvc2kiLCJyZWFjdC1pY29ucy9zbCIsInJlYWN0LWljb25zL3RiIiwicmVhY3QtaWNvbnMvdGZpIiwicmVhY3QtaWNvbnMvdGkiLCJyZWFjdC1pY29ucy92c2MiLCJyZWFjdC1pY29ucy93aSJdfSwiYnVuZGxlUGFnZXNSb3V0ZXJEZXBlbmRlbmNpZXMiOmZhbHNlLCJjb25maWdGaWxlIjoiL3RtcC9uZXh0LXN0YXRzNTY0cDVHL3N0YXRzLWFwcC9uZXh0LmNvbmZpZy5qcyIsImNvbmZpZ0ZpbGVOYW1lIjoibmV4dC5jb25maWcuanMifQ==","pagesType":"app","appDirLoader":"bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGYXBwLWVkZ2Utc3NyJTJGcGFnZSZwYWdlPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZVBhdGg9cHJpdmF0ZS1uZXh0LWFwcC1kaXIlMkZhcHAtZWRnZS1zc3IlMkZwYWdlLmpzJmFwcERpcj0lMkZ0bXAlMkZuZXh0LXN0YXRzNTY0cDVHJTJGc3RhdHMtYXBwJTJGYXBwJmFwcFBhdGhzPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh","sriEnabled":false,"middlewareConfig":"e30="}!
       var _self___RSC_MANIFEST;
 
       const incrementalCacheHandler = null;
@@ -404,47 +404,47 @@
       /***/
     },
 
-    /***/ 5920: /***/ (
+    /***/ 2423: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 1817)
+        __webpack_require__.bind(__webpack_require__, 4394)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 9652)
+        __webpack_require__.bind(__webpack_require__, 4988)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 3519)
+        __webpack_require__.bind(__webpack_require__, 9932)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 4977)
+        __webpack_require__.bind(__webpack_require__, 6371)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 9558)
+        __webpack_require__.bind(__webpack_require__, 9592)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 2096)
+        __webpack_require__.bind(__webpack_require__, 2380)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 3392)
+        __webpack_require__.bind(__webpack_require__, 6487)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 9693)
+        __webpack_require__.bind(__webpack_require__, 7202)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 5675)
+        __webpack_require__.bind(__webpack_require__, 4645)
       );
 
       /***/
     },
 
-    /***/ 7129: /***/ () => {
+    /***/ 8402: /***/ () => {
       /***/
     },
 
-    /***/ 4791: /***/ (
+    /***/ 3053: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -464,7 +464,7 @@
       /***/
     },
 
-    /***/ 9469: /***/ (
+    /***/ 9363: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -476,7 +476,7 @@
         /* harmony export */
       });
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(3251);
+        __webpack_require__(4470);
 
       function RootLayout({ children }) {
         return /*#__PURE__*/ (0,
@@ -495,7 +495,7 @@
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ __webpack_require__.O(0, [33, 320], () => __webpack_exec__(4558));
+    /******/ __webpack_require__.O(0, [778, 793], () => __webpack_exec__(5971));
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ (_ENTRIES = typeof _ENTRIES === "undefined" ? {} : _ENTRIES)[
       "middleware_app/app-edge-ssr/page"
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js 
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 5497: /***/ (
+    /***/ 2307: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5700);
+          return __webpack_require__(4720);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 959: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8697: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(5439)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(232)
+        __webpack_require__(2185)
       );
-      const _getimgprops = __webpack_require__(7335);
-      const _imageconfig = __webpack_require__(7712);
-      const _imageconfigcontextsharedruntime = __webpack_require__(1207);
-      const _warnonce = __webpack_require__(9114);
-      const _routercontextsharedruntime = __webpack_require__(8426);
+      const _getimgprops = __webpack_require__(9461);
+      const _imageconfig = __webpack_require__(5517);
+      const _imageconfigcontextsharedruntime = __webpack_require__(8947);
+      const _warnonce = __webpack_require__(5860);
+      const _routercontextsharedruntime = __webpack_require__(7328);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8106)
+        __webpack_require__(7310)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -376,7 +376,7 @@
       /***/
     },
 
-    /***/ 7335: /***/ (
+    /***/ 9461: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -392,9 +392,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(9114);
-      const _imageblursvg = __webpack_require__(9966);
-      const _imageconfig = __webpack_require__(7712);
+      const _warnonce = __webpack_require__(5860);
+      const _imageblursvg = __webpack_require__(5425);
+      const _imageconfig = __webpack_require__(5517);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -769,7 +769,7 @@
       /***/
     },
 
-    /***/ 9966: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5425: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 8366: /***/ (
+    /***/ 9578: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -851,10 +851,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(1478);
-      const _getimgprops = __webpack_require__(7335);
-      const _imagecomponent = __webpack_require__(959);
+      const _getimgprops = __webpack_require__(9461);
+      const _imagecomponent = __webpack_require__(8697);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8106)
+        __webpack_require__(7310)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -886,7 +886,7 @@
       /***/
     },
 
-    /***/ 8106: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7310: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -921,7 +921,7 @@
       /***/
     },
 
-    /***/ 5700: /***/ (
+    /***/ 4720: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -938,8 +938,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(3456);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/image.js
-      var next_image = __webpack_require__(5008);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/image.js
+      var next_image = __webpack_require__(932);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -969,12 +969,12 @@
       /***/
     },
 
-    /***/ 5008: /***/ (
+    /***/ 932: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(8366);
+      module.exports = __webpack_require__(9578);
 
       /***/
     },
@@ -984,7 +984,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(5497)
+      __webpack_exec__(2307)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for main-HASH.js

Diff too large to display

Commit: b219bb361bee878bd2ec7f0194e79d9f5f26f6d8

ijjk avatar Feb 05 '24 20:02 ijjk

Tests Passed

ijjk avatar Feb 05 '24 20:02 ijjk

Tried running the tests locally and the test that errored out has passed. Is there a chance one of the e2e tests can be flaky? I've pressed "update branch" to see if the outcome in the CI would be different (haven't expected it will need another approval, but makes sense 😅). Otherwise, that might be my local env and I'll try to make it fail the same way it does in CI here

blvdmitry avatar Feb 05 '24 21:02 blvdmitry

@blvdmitry It needs another approval!

Started discussing this internally. I'd love to ask some questions around this!

  • What do you think about keeping the default fallbacks (one of the big benefits of using next/font) hashed still? I assume if the 3rd-parties are just targeting, e.g., Inter, keeping the default fallbacks hashed seems to make sense.
  • Also curious what 3rd party libraries you are attempting to use with next/font!

samcx avatar Feb 05 '24 21:02 samcx

I'm scratching my own itch here trying to have it supported for reshaped.so, but before picking it up I saw that the same issue exists for others too. This stands for any component library that provides pre-built themes that include custom fonts, as well as other 3rd party tools like builder.io mentioned in the original discussion.

Let me think about the fallbacks hashing, I wrote this code 1.5 years ago so don't remember all the details right now. I think that was either about fallbacks being not useful with hashes, considering that the 3rd party css for that font is already generated or it was actually breaking something during rendering when using 3rd party libraries.

Let me check it in the local environment again with and without fallback hashing

blvdmitry avatar Feb 05 '24 22:02 blvdmitry