Skip to content

Importing SVG in NextJS

I am trying to import an svg within a NextJS project, everytime I get this error

./assets/aboutimg.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
> <svg xmlns="" xmlns:xlink="" width="578" height="1028" viewBox="0 0 578 1028">
|   <image id="_64538565_2370063099695596_8091233071539421184_n" data-name="64538565_2370063099695596_8091233071539421184_n" width="578" height="1028" xlink:href="

I have tried using next-images and also svgr. I will paste my About.js code below, it would be excellent if someone could let me know what I have been doing wrong.

import LayoutNoLogo from '../comps/LayoutNoLogo'
import AboutImg from '../assets/aboutimg.svg'

const About = () => {
    return (
            <div className="row">
                <div className="column-1">
                    <img src={AboutImg} />
                <div className="column-2">
            <style jsx>{`



export default About;


Using next-images and adding the correct module exports allowed me to use images of all file types.