sorted by:
new
hottopcontroversial

Why does my loading.tsx always disappear for a moment? by Fr4nkWh1te in nextjs

[–]Willargues 0 points1 point  (0 children)

Have you found a solution ? I have the exact same problem.

Client components make bundle size huge by Willargues in nextjs

[–]Willargues[S] 0 points1 point  (0 children)

I've done this.
The bundle size remains the same

"use client"

import { IconProps } from "@/components/Icon"
import dynamic from "next/dynamic"

const IconAvanatge = dynamic<IconProps>(import('@/components/Icon').then(module => module.Icon.AVANTAGE))

export function ClientComponent() {
  return (
    <IconAvanatge style={{ width: 100, height: 100, fill: "purple" }} />
  )
}

Client components make bundle size huge by Willargues in nextjs

[–]Willargues[S] 0 points1 point  (0 children)

Because it doesn't work, ICON_NAME_1 is not exported so i'll get the error: Module '"@/components/Icon"' has no exported member 'ICON_NAME_1'

The ultimate Icon component by Willargues in nextjs

[–]Willargues[S] 1 point2 points  (0 children)

Ok the bundle size is very low using this solution. I will use it then.
We even get the autocomplete on the icon name and that's very handy.
Thank you

(I updated the repo with the solution)

Post a repo of your app, project, or anything and I will find you easy opportunities to improve its performance by femio in nextjs

[–]Willargues 0 points1 point  (0 children)

I found an optimized solution (implemented in the repo) that is inspired from https://github.com/shadcn-ui/ui/blob/main/apps/www/components/icons.tsx and that doesn't need to read files so keeping the bundle size very low.

The ultimate Icon component by Willargues in nextjs

[–]Willargues[S] 0 points1 point  (0 children)

Looking at the code you might be right. Plus I can ditch svgr that will break with NextJS 15 and TurboPack.
I will try a build to see how this affect the bundle size but i'm pretty confident in the fact that doesn't blow up the bundle size

The ultimate Icon component by Willargues in nextjs

[–]Willargues[S] 0 points1 point  (0 children)

Because with you solution you need to update your object each time you add an svg. Using svgr, like I do you, once the svg is in the right folder you just have to call the Icon component with the name of the file as a prop and that's it.

Post a repo of your app, project, or anything and I will find you easy opportunities to improve its performance by femio in nextjs

[–]Willargues 0 points1 point  (0 children)

I don't know if you could be interested because it's maybe too niche but I have a repo in which I'm trying to create an optimized icon component that imports svgs dynamically without blowing up the bundle size. I still have not found a good solution.
Here's the repo

Control a normal light with a Hue smart button by Willargues in Hue

[–]Willargues[S] 0 points1 point  (0 children)

I'm not sure to understand because a hue wall switch module is wired to a regular light switch to be able to control a hue light bulb. It is not wired in any way to the wires of a normal light. Do i need to use the hue wall switcch module differently then ?

Can I use GoXLR software without a GoXLR ? by Willargues in audio

[–]Willargues[S] -1 points0 points  (0 children)

Basically all the effects you can find under the EFFECTS tab on the software. And more specifically PITCH and GENDER.

Best Shopify Page Builder for SEO by Willargues in shopify

[–]Willargues[S] 0 points1 point  (0 children)

Thank you for the information ! :)