Using Next.js Router

Next.js is a React framework that helps us build applications in a faster and easier way, offers make building large scale production ready React applications easier, leaving aside the part of the initial configuration since all that configuration comes by default.

In a typicall React application you need to add extra libraries to add some features like routing, authentication, etc. Next.js provides these features and you don't have to add as many third party libraries to solve common problems

To create a new Next.js project use:

npx create-next-app

How use Next.js Routing

In a traditional React app (not using Next.js) we configure routing based on code, for example:

<Router>  
      <Switch>
          <Route path="/" exact component={App}/>
          <Route path="/detail" exact component={Detail}/>
          <Route path="/admin" exact component={AdminMain}/>
        </Switch>     
</Router>

In this example, you specify the path and the component you want to show in that path, your components can be in any folder in your source, there is no specific way to organize the components within the code.

Next.js provide us with a more natural file base routing, you just need to follow some guidelines and then Next.js will infer the routes.

First you need a special folder named pages

Then, you organize your React components in a folder structure inside your pages folder according to your needs, for example, if we have the components and folder structure:

The index.js from pages will be our main page (for example: mypage.com)

The about.js from pages will be displayed when you access to mypage.com/about

For clients folder:

The index.js from pages/clients will be the page for mypage.com/clients

In Next.js you can add brackets to a page ([param]) to create a dynamic route, in this case the [clientid].js is the page for a specific client like mypage.com/clients/clientABC,

You can also catch all paths by adding three dots inside the brackets like in pages/clients/[...others].js, in this case Next will search for a path that satisfy this structure, something like mypage.com/clients/clientABC will match with pages/clientes/[clientid].js but mypage.com/clients/search/clientABC will match with pages/clients/[...others].js

To get access to the URL values in code Next.js provide a hook we can use, we need to import:

import { useRouter } from 'next/router';

useRouter give us various methods and data propierties we can use, for example: pathname provides the path of the component showed in the screen, query gives access to the value we get on a specific path

In our code we usually have to navigate to a page through a Link or an action triggered by a button, if you need a link Next.js have a Link component

import Link from 'next/link';

With Link you can use href property to specify the path which you want to navigate

<Link href="/clients">Client List</Link>
//or
<Link href={`/clients/${clientId}`} >{clientName}</Link>

or you can provide an object to href where you specify some values that next.js is expecting like pathname and query which is an object with the value you want to pass, in this case, clientId

<Link href={{
     pathname: '/clients/[clientId]',
     query: {clientId: client.id}
}} >{clientName}</Link>

If you use a button you can use router.push, with this you can specify the route:

function onClickHandler(){
   router.push('/clients');
}

or you can pass and object :

function onClickHandler(){
   router.push({
      pathname:'/clients/[clientId]',
      query: {clientId: client.id}
   });
}

Next.js also give us an easy way to manage a 404 page, you just need to add a file on your root pages folder and this file has to be named 404.js and Next.js always will render the component in this file when a 404 error occur.