How to use Draft.js WYSWYG with Next.js and Strapi Backend, Edit/Update Saved Article
Introduction This post is in contuation of our previous post: How to use Draft…
January 30, 2022
In this post, we will see
A general code to load image in next.js is
<Image
src={this.props.article.image.url}
height={400}
width={700}
alt={this.props.article.title}
/>
If this image url is same as your domain name, then its fine and you do not need to do anything else.
But, if you are loading images from any other url like unsplash
or s3.amazonaws.com
, then it will not load it.
By default, Next.js does not allow you to load images from any other url. This is due to security implications. You should know from where you are loading images.
You need to configure this in next.config.js
configuration file, often placed at the root folder of your project.
A sample file:
module.exports = {
env: {
NEXT_PUBLIC_API_URL:
process.env.NEXT_PUBLIC_API_URL,
...some other properties
},
images: {
domains: [
'images.unsplash.com',
's3.amazonaws.com'
],
}
};
In this way, you are telling Next.js
to load images from above mentioned two domains.
Your image source will become something like below:
/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Ffiles.<my_bucket>.com%2Ffiles%2Farticles%2Fasian_garden_1a6667449c.jpg&w=1920&q=75
There is a catch here too. read next line.
If you are deploying your application using Docker containers
, then you will most probably face this issue again, even if you have used next.config.js
.
When you load, you will see this error:
"url" parameter is not allowed
We generally take Dockerfile
from the official sources, and there is this line commented:
# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
Just uncomment above COPY
step, and re-build your container image.
This should work.
Hope this helps.
Introduction This post is in contuation of our previous post: How to use Draft…
Agenda I will cover following in this post: Prepare Docker image for Next.js app…
Introduction I was trying to upload images to my backend using rest APIs. I was…
Introduction Strapi is a backend system provides basic crud operations with…
Introduction In our previous posts, we have seen How to Create Article in Strapi…
Introduction In this post, we will do following: create a Next.js project…
Introduction This post has the complete code to send email through smtp server…
Introduction In a normal email sending code from python, I’m getting following…
Introduction In one of my app, I was using to talk to . I have used some event…
Introduction So you have a Django project, and want to run it using docker image…
Introduction It is very important to introduce few process so that your code and…
Introduction In this post, we will see a sample Jenkin Pipeline Groovy script…