Learn how to use the latest Next JS features. In this one, we will take a look at the Image component and discover what it brings.

Are you tired of writing code to serve the right image size for different screen sizes and use image optimization services?

Next.js has already solved these problems for us with a built-in component called <Image>, and it’s just a matter of learning how to use it to make our developer lives easier.

Resources

Table of contents

Introduction
Using the native HTML tag
Background image example
Card image example
Trying to solve image issues without Next.js
How to use the Next.js component
Background image
Card image
Conclusion

Introduction

We’ll use a demo app to show how to…


The way data is fetched on Next.js will affect the pre-rendering strategy applied. Do you know them?

Table of contents:

· A bit of web apps history: swinging back and forth
· How to consume the data on Next.js
— getStaticProps & the SSG approach
— getServerSideProps & the SSR on-demand approach
— Extra benefit of server-side functions
— Dynamic routes & getStaticPaths function
· Bonus: Serverless functions
· Demo app
· Conclusion

Resources

Full Next JS Course: https://academy.eincode.com/next.js

A bit of web apps history: swinging back and forth

In the old times, the apps’ core was on the back end, running on PHP, Ruby, etc.

Just open a WordPress website and navigate between pages: you’ll see that a new HTML doc is requested every time you navigate a different page…


Table of contents:

What is Next.js?
What’s the main difference with React?
Discoverability
What is SEO?
Device hardware and internet speed
React vs. Next demos apps
React demo
Next demo
Conclusion
Benefits of using Next
When to use Next.js over React?

Resources:

Full Course: https://academy.eincode.com/courses/next-js

What is Next.js?

Next.js a JavaScript framework for building SSR (Server Side Rendering) applications, built on top of the popular React.js library.

Being a framework means that it’s got its own tooling, so, for example, there’s no need to add a router library because it’s already baked in. …

Esteban Munch Jones

Front-end Engineer and keen tenkara fisherman

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store