Q44: How do you configure SVG inline loading in Pages Router next.config.js using @svgr/webpack?
To import SVG files directly as React components in the Pages Router, extend next.config.js with Webpack module rules targeting @svgr/webpack.
SVGR Webpack Config
// next.config.js
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
use: ['@svgr/webpack'],
});
return config;
},
};💡 Allows writing import Logo from './logo.svg' and rendering <Logo /> directly in JSX.
Key Takeaways
- Extends Webpack module rules for custom file extensions.
- Allows importing
.svgfiles directly as React component functions.
Knowledge Check
Where do you append custom file transformation loaders in a Next.js application?