使用next-images和babel-plugin-inline-react-svg在Next.js中渲染SVG图像

Next.js is very beautiful and powerful react framework loved by more people day by day because of its amazing features. People often switch to Next.js for Server Side Rendering and for making SEO friendly applications.

Next.js是一个非常漂亮且功能强大的React框架，由于其惊人的功能而日益受到越来越多的人的喜爱。 人们经常切换到Next.js进行服务器端渲染和制作SEO友好的应用程序。

Often we get stuck into image rendering problems and problems using svg images while starting with Next.js. I personally got into some dilemmas while working with images in Next.js for the first time. So, I decided to write about it with a hope that you people do not stuck into these kind of troubles.We will create a sample application for rendering the image and observe its different scenarios. So, Let’s go!

从Next.js开始，我们经常陷入图像渲染问题和使用svg图像的问题。 第一次在Next.js中处理图像时，我个人遇到了一些难题。 因此，我决定写这篇文章，希望大家不会陷入此类麻烦。我们将创建一个用于渲染图像的示例应用程序，并观察其不同场景。 所以，走吧！

1. Create Project DirectoryLet’s create a project directory and name it as next_image_project. Open up the project directory on your favorite Code Editor and I would prefer vscode for it.

1.创建项目目录让我们创建一个项目目录，并将其命名为next_image_project 。 在您最喜欢的代码编辑器上打开项目目录，我更喜欢使用vscode 。

2. Initialize package.jsonOpen up the terminal containing the project directory and run following command that will create package.json file, which includes our project dependencies and scripts. Including -y on the command will generate the package file with all the defaults.

2.初始化package.json打开包含项目目录的终端，然后运行以下命令将创建package.json文件，其中包括我们的项目依赖项和脚本。 在命令中包含-y将生成具有所有默认值的软件包文件。

npm init -y

3. Install React, React Dom and NextNow, we install React, React Dom and Next for our project with the following command.

3.安装React，React Dom和Next现在，我们使用以下命令为我们的项目安装React，React Dom和Next。

npm install --save react react-dom next

3. Change Scripts of package.jsonAdd these scripts to the scripts section of package.json. Then, we can run the code with the command npm run dev.

3.更改package.json的脚本将这些脚本添加到package.json的scripts部分。 然后，我们可以使用命令npm run dev运行代码。

//package.json
"scripts": {
       
    "dev": "next",
    "build": "next build&