All language subtitles for 001 Static Assets_en

Thanks to some styling,

our website is starting to look a bit nicer.

But it's still quite plain.

What we could do is add some images,

maybe one for each game we review.

We'll also want to style these links by the way,

but let's start from a review page.

We could show an image here,

representing this game.

But where should we put the images in our project?

We can create a folder, at the top level,

called "public".

Any files we put inside that folder

will be treated as "static assets".

Just to show you how it works,

let's create a file named "test.txt",

and write some text, like "Hello world!"

That file will now be served

by the Next.js server,

and we can access it as "/test.txt".

So, any file in the "public" folder

will be returned exactly as it is.

That's how we can serve images as well.

If you look under the Resources for this lecture,

you'll find a file called "images.zip",

that contains a few pictures for our game reviews.

So you can download this package to your machine.

And you can save it directly inside

the "next-reviews" project,

in the "public" folder.

So this will download it there.

And I'll open it in Finder, that's

the macOS File Manager.

We can unzip this file directly

inside the "public" folder,

and it will create its own "images" folder.

We can also delete these other two files now.

Ok. We have some images to use in our project.

Let's go back to our application.

And I'll reload the Home page.

"test.txt" doesn't exist any more.

But inside "public" there's

now an "images" folder,

that contains three jpeg files.

"stardew-valley.jpg" is a screenshot

from the Stardew Valley game.

Then there's one for "hollow-knight".

And the third one is "hellblade".

We don't have a page for this game yet,

but we'll add one later on.

Anyway, we have some images.

Since they're inside the "public" folder,

we can access them directly as "/images/hellblade.jpg"

for example,

and the browser will display it,

because the Next.js server returns

the jpeg file as it is.

Ok, so let's use those images in our pages.

Let's start from the Hollow Knight review,

that I'll open in the browser as well.

Here we can add an image after the Heading,

and we'll use the standard HTML

"img" element for now.

The path will be "/images/hollow-knight.jpg".

Then we should set the "alt" attribute,

for accessibility.

But we can leave it empty,

because this will be a purely decorative image.

The heading already contains the game title.

And we can see the image on the page.

Now, it's good practice to also

specify the dimensions,

so that the browser can reserve the right

amount of space when rendering the page.

Let's set the "width" to 640 pixels,

and the "height" to 360.

The original size is 1280x720,

so this will preserve the aspect ratio,

but we don't want the image

to take up the whole page.

We want to be able to see the text as well.

If we're on a smaller screen,

it will automatically shrink.

Now, let's add some styles.

We'll use Tailwind CSS classes as usual.

Let's make it "rounded",

just because rounded corners look nicer.

We could also add some margin at the bottom,

to leave some space before the text below.

And I think that's good enough for this example.

Let's copy this code

and do exactly the same in the other review page,

that is for Stardew Valley.

Let me show the right page.

So, we can paste the image code here,

but we need to change it to "stardew-valley.jpg".

And if we save, we see the right image.

Ok. It's much better with a screenshot.

So, to recap: we just need to put our

images inside the "public" folder

and the Next.js server will return

them directly as they are.

You can use the same approach

for any other static asset,

like videos, audio files, PDF documents,

and so on.