Highlights from Next JS app

A coding newb, I still get a kick out of seeing the little things I code actually appear on a browser. It’s the tween in me. Anywho, back to the business of learning Next JS, which is a great React framework created by Vercel to create better apps, allowing TypeScript integrations as well (I was curious about this). In the following sections, I’ll highlight a couple of the great features in this developer-friendly and user-focused technology.

Index.html is gone

When I first tried collaborating on a Next.js project, I spent some time stumped and embarrassed that I could not even find the index.html file. I learned that Next.js actually does away with the index.html file altogether. Instead, all of the homepage code is handled in the pages/index.js file. Notice that this is a functional component conventionally called “Home.” It contains HTML and CSS for the homepage. This page is associated with the “/” route.

As an extension, all other pages on the site will start with “pages/” and end with the relevant file type.

Code splitting and the link component

Next.js apps automatically does code splitting, which means “each page only loads what’s necessary for that page.” Therefore, the homepage’s load time will not be affected by the size of all the other pages on the site. When any other page is requested, the browser only loads what is needed for that page.

This has a particular implication for the Next.js “link” component, which enables client-side navigation between pages within a Next.js app. Below, you can see that the link component is imported and then used in the element at the bottom of the screenshot.

In contrast to the link in the <h1> element, which uses the standard <a href=“…”> </a> tag, the <h2> element uses the imported link component and the <Link ref=“…”></Link>. The difference is that the <link> tag does not require a page refresh, unlike the <a> tag, which does.

According to the documentation, a great feature of the link component is that when a page that has it loads, that page “prefetches the code for the linked page in the background. By the time you click the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant!” Small tweaks like this demonstrate how Next.js focuses on improving UX.