Taking your project to the Next level with Next.js

In this article I am going to explain what Next.js is and why you should use. It is important to note that you should have some familiarity with React before diving into any of its frameworks, including Next.js. If you're already equipped with React knowledge then get ready for an amazing ride

First things first, what is Next.js

Simply put, Next.js is a React framework for developing Single page applications, or SPAs. Next.js is inspired by PHP and benefits from a great system of javascript modules that allow us to perform individual tests for each component as well as download thousands of components or modules from npm. The benefits are plentiful, but the main two are speed and performance. We'll dive into the specifics now.

1. Server side rendering

Components that make up the UI are initially rendered on the server side. This makes page loading times appear much faster to the user.

2. Automatic code splitting

Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.

This ensures that the homepage loads quickly even if you have hundreds of pages.

Only loading the code for the page you request also means that pages become isolated. If a certain page throws an error, the rest of the application would still work.

Furthermore, in a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically 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!

Okay sounds good, how do I include this in my next project

1. create a next.js app This step in pretty straight forward. Next.js only requires that you have node installed, after that it is as simple as typing npx create create-next-app yourappnamehere. If you'd like to use a template behind it simply put --use-npm --example "link here". all that's left do after that is to change your scripts inside of your packagae.json file to look something like this

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

1. Run your development server
   From there you will cd into your app instances and run the npm run dev command. This will start your Next.js app's development server.
   After that you should see this
   

2. Next you will need to create new page using the integrated file system routing. You will use the Link components to enable client-side navigation between pages. You will also be using that built in support for code splitting and prefetching that I mentioned earlier. If you are familiar with react router it looks similiar to that
   

import Link from 'next/link'

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </>
  )
}

If you'd like the full documentation on Next.js routing you can find that here.

In conclusion

Next.js automatically optimizes your application for the best performance by code splitting, client-side navigation, and prefetching in production.
You can create routes as files under pages and use the built in Link components. No outside routing libraries required.

your turn to try it!