How To Serve Static Files With Next.js
We generally use static files for content that does not change often for example a blog about scientific facts.
If you are short of time, here is a brief summary:
- You should use static content for those content that changes infrequently
- You should use static content to enhance your SEO (Search Engine Optimisation)
- In Next.js, we use getStaticProps to fetch static content stored on an external server such as a headless CMS (Content Management System)
- getStaticProps is executed at build time NOT request time
- We use getStaticPaths to generate the url paths for the different pages containing those static content, for example, we can use the unique blog title for the url paths for each blog post (each blog post should have their unique URL)
- Since getStaticPaths is executed at the same time as getStaticProps, it means that we need to know what URLs we need for our site (all paths for the static pages are generated at build time)
- For more details, keep reading!
Pro Tip: Build time refers to when your Next.js application is built before the application is served to the browser on the user's device such as a laptopIf you are thinking of switching to a career in tech or changing to a new tech job, here are some job sites you can get started with:
- https://underdog.io
- https://dailytechjobs.com
- https://www.hiretechladies.com
- https://weworkremotely.com
Do something today!
The Difference Between Static and Dynamic Content
Dynamic content is typically triggered by client-side rendering.
It is referred to as dynamic as the content retrieved depends on some user interaction with our web application.
What is client-side rendering?
Client-side rendering is when the content, i.e. the dynamic content , on your webpage is rendered by executing some Javascript code in your frontend application.
What content is displayed on the webpage is dependent on the user’s action, for example, did they click on a login button or did they click on an image.
Whereas static content is known even before the web application arrives at your browser so the user’s action has no effect on the content.
Pro Tip:
A website you see in your browser is actually made up of HTML, CSS and Javascript files
And these files are served from a server somewhere in the world
This is why a web application like Next.js has to be built on the server first
Then the completed web application is served to your browserI wish I knew this when I first started web development.
Before you start building a web application, you should ideally plan out how the content will be published on your site.
This means you should distinguish the content between static and dynamic.
Pro Tip:
you should publish content you want to rank for SEO purposes as static content
so how do you know what content to write? This is time for some research on your part
So do your keyword research to optimise your SEO strategy! To see more examples on how to use getStaticPaths and getStaticPaths, read these:
How do we serve images from Next.js?
You can serve images directly from your Next.js application in the public folder.
If you host your frontend application with Vercel, the Vercel servers will automatically serve the images from the images you have saved in your public folder inside your Next.js application.
For more details, read this:
We provide the following 1 on 1 training programs:
- Full Stack Web Development
- Interview Prep
If you have any questions regarding our services or publications , you can reach us at team@remoteupskill.com
We publish short tech tutorials on a regular basis so consider subscribing to our Medium Blog.
Until next time — keep coding while moving small steps forward on this coding adventure of yours.
But more importantly, stay focused!
