Next.js Discord

Discord Forum

why in next.js spit on svg?

Unanswered
oxmaster posted this in #help-forum
Open in Discord
So far, frameworks like remix take care of this and create rmx-cli for building svg sprites, in next.js there is nothing but to upload as an svg image.

23 Replies

you yourself focus on good rust tools, then on seo, but you don't see the most obvious. This is svg
I was waiting for next.js incredible work with svg. Caching, svg sprites, but in the end, what do I get: this is one line in next.config about svg in pictures
Even if you use third-party libraries, there is literally practically nothing about it. The maximum is svgr/webpack, which does not even make sprites, but components that are just for convenience.
The most important thing is that I can't use turbopack at all because of svgr, because I have webpack in my config, and because of this I can't run turbopack in dev mode
and tools like babel-inline-svg, in my opinion, are not supported at all using next.js
https://github.com/vercel/next.js/discussions/56845 I tried to create discussions, but again I didn't find any support.
what I am doing with my current project is creating SVG components from the icons in figma, but I agree it is not the best workflow because I need to make sure they are optimized (with SVGO) then convert them afterwards to JSX and it is still not the best method for performance
something to automate all of this while creating sprites would be amazing but I don't think they will do something like that anytime soon
this sounds like a good oportunity for a community library
here's what happens if I run turbo with the webpack config
@Rafael Almeida what I am doing with my current project is creating SVG components from the icons in figma, but I agree it is not the best workflow because I need to make sure they are optimized (with SVGO) then convert them afterwards to JSX and it is still not the best method for performance
I just thought that remix creates such tools, and the bonus is next.js creates something similar for images. I'm really from next.js expected an explosion, there's a similarity: Caching, svg sprites on pages, etc., but in fact nothing
remix conducted a good article + pointing to a google article on this topic: https://benadam.me/thoughts/react-svg-sprites/
Well a simple explanation is that remix does it but nextjs doesn’t. Out-of-the-box support for svg sprites is nice to have but is not an essential feature without which nextjs is unusable.
@joulev Well a simple explanation is that remix does it but nextjs doesn’t. Out-of-the-box support for svg sprites is nice to have but is not an essential feature without which nextjs is unusable.
Well, damn, the same can be said about the pictures. The Image component - according to your logic, this is also not a very important function, but it is present, and sprites are not, although they do not affect the load of photos, but the js package that comes to the client (if you use tools like svgr)
as well as icons from popular libraries such as radix/icons and lucide-react icons
I just don't understand why pictures are important to next.js, and icons are not, although next.js even creates server components to send less client code, but does not notice obvious problems.
That’s purely a decision on their part that you cannot do anything about. There are tons of guides on svg sprites on the web, follow them.
Nextjs decided to not have native out of the box support for sprites. That’s it, there’s nothing more to it.
I hasten to upset you, I have only found 1 video for all this time, which was released 3 months ago how to make sprites in next.js . Besides svg = component, people do not offer anything else and tools such as svgr/webpack. But all these webpack tools unfortunately don't work fine with turbopack.
No one forces you to use turbopack. Nextjs is forcing themselves to make turbopack reach 1:1 parity with webpack, you as the user are by no means required to use turbopack, which is still unstable anyway.

Nextjs is a web framework. Svg sprites is not a react-specific technique, you can do svg sprites in raw html. Then just do svg sprites in nextjs the way you would do it in raw html.

Nextjs doesn’t have, nor do they plan to have, native support for sprites. Their interests lie elsewhere and there’s nothing you can do to shift their interests. If you want nextjs to have native sprites support, the best thing you can do is to implement it yourself and make a PR – the framework is open source and MIT licensed anyway, you are more than welcome to contribute and there are many features in nextjs implemented by outside contributors and not team members.
tldr if you really need it, make it yourself