Learning NextJs - Day 9

NextJs by default allows you to bring your own static files (js, css, images, json, etc) without any extra configuration.
In order to do that you need an “static” folder inside your project.

So let’s create the folder with that specific name

1
mkdir static

Now you can put an image there (or any other static file) and use it in your pages. Let’s pretend you have the logo of your app inside the static under the creative name of mylogo.png.

You can use the following path to show the logo in an img tag

1
/static/mylogo.png

Let’s create a contact.js page

1
2
3
4
5
6
7
function Contact() {
  return (
    <img src="/static/mylogo.png" alt="My App Name" />
  );
}

export default Contact

And if you start your NextJs server and go to the url /contact you will see your logo.

Custom Server

If you have integrated next with express, hapijs or any other web framework, you will need to declare that route on your web framework as well.

If you are using hapijs the route will look like this

1
2
3
4
5
6
7
8
// other code omited 
// for reading purposes

server.route({
  method: 'GET',
  path: '/static/{p*}',
  handler: nextHandlerWrapper(app),
});

With this you are telling HapiJs to use the nextHandlerWrapper every time a request to the static folder is made.