Serve static files with Next.js

Tomasz Łakomy: [0:00] Next.js can be used in order to serve static files like images and whatnot. In order to do that, you have to put some files in the public directory, which was created when we started the project.

[0:11] I'm going to use that in order to add an image to every single blog post on our blog. In most cases, you probably want to use an image that is somewhat relevant to the content of the blog post. I'm going to make it easy and just use this awesome picture of our bunnies.

[0:25] This is Harry and this is Ginny. They're going to appear on every single page of our blog. As you can see, I've already added this image to the public directory, and I'm going to use that by going into pages, post, [id] .tsx.

[0:38] Here, I'm going to add an image. Before I do that, I'm going to create a new component in order to start this image. First up, let me go to the components file, and I'm going to create a new component for the image.

[0:49] I'm going to do export const BlogpostImage = styled.img. Inside of it, I'm going to set the width: 100% and height: auto in order to make it responsive. Let me also add some margin. I'm going to set the margin: 20px.

[1:05] Right now, this article file has a component for the Article and a BlogpostImage that is going to appear on top of the Article. Let's go back to our blog post. I'm going to import this BlogpostImage component that we have just created. I'm going to use it over here. BlogpostImage, that is going to take a source. The files in the public directory are available under /.

[1:27] All we have to do is set the source to /harry_and_ginnt.jpeg. I'm also going to set the alt mage to "Two cute bunnies." Let's see the result. Right now, on every single page of our blog posts, we are getting the picture of our bunnies served from the public directory. There's something funky going on with the margin.

[1:46] Let me just go ahead, go over here and fix that. I'm going to set the margin: 20px . Right now, it's fixed. Awesome. Public directory can not only be used in order to serve images. For instance, we can also serve HTML files.

[1:59] I'm going to create a new file, which I'm going to call error.html. Inside of it, I'm going to paste in some markup. I'm going to set the title to Whoops. Inside of it, I'm going to set the body to Whoops! Because something terrible has happened. If I go over here and navigate to error.html, we can see that our file is instantly served from the public directory.

[2:20] After we push our changes to GitHub, we can see that our site has been instantly rebuilt with Netlify, and we can see this image on every single page in our blog.