Simplified Next.js, The modern React.js Framework #2

Built-in functionalities (Navigation, Link, Code splitting, and prefetching)

This is the continuation of the previous post, where we get started with the installation and basic info you need in order to use Next.js, for your projects. In this new chapter, we´ll be learning some Next.js, built-in useful basic functionalities.

Navigation between pages

Here you see one of the most basic, but useful Next.js functionalities. But You will not be surprised after see in it, because is something I showed you in the previous Next.js related post here you have it if you haven´t seen it yet 👏👉👉Simplified Next.js, The modern React.js Framework #1

What I am talking about is simply the structure of files that go into the Pages/ folder, and that is used instead of the react-router-dom library to navigate in your web app user views.

Here you have it 👇🙌:

files structure

• Pages/index.js → (is a file that represents your homepage, (“ / “, in your browser URL bar)and is created by default by Nex.js)
• Pages/products.js → (is a normal view, and represents (“ /products “, in your browser URL bar) )
• Pages/about.js → (is a normal view, and represents (“ /about “, in your browser URL bar) )
• Pages/contact.js → (is a normal view, and represents (“ /contacts “, in your browser URL bar) )

When you created these components (about.js, contact.js), automatically you have available the same file’s name as your routes and you can use them directly on your page like this: 👇

Link Component

If you have previously used React.js, this will be very familiar to you, after all, is a component that makes React.js normally behave as a SPA application, and in Next.js the functionality doesn´t work differently either. The unique difference between both is that in React you normally install react-router-dom from npm and in Next.js is something that already comes with it.

import Link from 'next/link'

And you use it like this:

<Link href="/about">
  <a>about page</a>
</Link>

Is important to notice that an anchor 👉👉👈👈 HTML tag is used in the Link component to work correctly as a SPA.

Code splitting and prefetching

If you know React.js lazy loading this basically means Next.js automatically does the lazy loading process and you don’t have to care about it. and if you ask, how do you control when the code loads when is needed, let me say you that again Next.js takes care of it, by using prefetching a functionality that automatically detects when a is on the viewport and prepares itself to load the component the user is requesting.

If you don’t know what the heck, is React lazy loading, then let me explain you quickly. Lazy loading is a technique to optimize your code by splitting the code into small chunks of information that does not load automatically after the page first renders in the browser, avoiding unnecessary code loading in the client and most importantly avoiding excessive loading times for users.

That it´s for today. Don’t forget if you want to help me do it via👌🧐
☕BuyMeACoffee.☕