Introduction

My Next.js adventure started in early 2022 when I had a project that was considerably large and needed to be completed in the shortest time possible. Before this project, I had read articles online about Next.js but had not tried building with it. I was all about building reusable components with plain React.

I needed a tool that could abstract some work away so I could focus on the actual building. Next.js did not disappoint, I finished my project in minimal time and with less effort. I added a new gem to my web development treasure hoard. Let's take a peek into Next.js.

What is Next.js?

Next.js is a popular framework built on top of the React library and offers a ton of amazing features, scalable structure, and optimizations for web applications. Application requirements such as routing, data fetching, Authentication, and third-party integrations are made easier by Next.js.

But more than the user interface (staying and dynamic content), Next.js also handles SEO and improves user experience. Next.js is indeed the icing on the cake of React.

Photo courtesy vercel

We cannot exhaust all the features of Next.js in this article, let's take a look at some of the amazing built-in tools shipped by this amazing library that caught my attention.

Routing

If you have some experience with React, you definitely would have had to fix client routing at some point using React Router. Let's check out a very basic example below.

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

This can quickly become serious work in a more complex application. Thanks to Next.js, we do not need to manually fix client-side routing. Next.js ships the file-system-based router which automatically links the file names in the pages directory to specific routes. Examples:

1. A file in the directory pages/about.js will point to the route /about

2. A file in the directory pages/dashboard/index.js will point to the route /dashboard

3. A file in the directory pages/dashboard/settings/username.js will point to the route /dashboard/settings/username

useRouter hook

For more dynamic routing, Next.js ships very useful features. Having gone through the Next.js documentation, there doesn't seem to be any routing problem that is not handled by the framework. A popular tool I use occasionally is the useRouter hook with helps to interface with the route parameters. Let's see useRouter in action.

import { useRouter } from 'next/router'

export default function Page() { 
  const router = useRouter()
   return ( 
     <button onClick={() => router.push('/about')}> Click me </button>
    )
 }

router.push navigates to another route

Built-in CSS support

Next.js has built-in support for whatever form of styling a developer chooses, whether plain old CSS, pre-processors such as Sass, or more modern CSS - in -JS frameworks such as Tailwind, Material UI, or chakra UI.

Personally, I have enjoyed building with Chakra UI because of its simplicity and versatility. Whatever your choice of styling though, you will most likely find support for them on Next.js. We will discuss styling options in another article. Stay tuned!

Layouts

React is all about reusable components, Next.js even takes it further to make available a way to persist some components across multiple pages. Imagine you have a Navbar and Footer on many or all pages of your site. The layout component is a great tool for this, let's see it in action.

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

Conclusion

Next.js ships so many cool features for web development, so many that we can't possibly exhaust in this article. TypeScript support, Image and font optimization, static file serving, API routes and so many more. A more detailed read would be the Next.js Doc.

If you made it this far, thank you for reading! Cheers!