With the next.config.js we can do some neat things, such as multi-SPA routing.

If you create yourself two Next.js apps, the “main” one is named home in my example and the second is a catalog and we will be able to navigate to.

Go to the next.config.js of the home app. and add the catalog changes listed below

const nextConfig = {
    reactStrictMode: true,
    async rewrites() {
        return [
            {
                source: '/:path*',
                destination: '/:path*'
            },
            {
                source: '/catalog',
                destination: 'http://localhost:3001/catalog'
            },
            {
                source: '/catalog/:path*',
                destination: 'http://localhost:3001/catalog/:path*'
            },
        ]
    }
}

in the catalog app go to it’s next.config.js and have it look like this

const nextConfig = {
    basePath:'/catalog'
}

then when you click a hyperlink to your second app it will actually appear as if it’s simply a page on the first app, with the same port.

Code is available on github as multiSpa.

I’ve been wanting to try Next.js for a while having seen many comments about it and podcasts talking about it. But what is Next.js?

Obviously your best source of information is to go and read the Next.js. website, but the basics are that it’s a React based framework for developing web applications or even full-stack web applications using React and features from React as the basis.

Then the next question you might have is why use Next.js over React?

Next.js builds upon React and give you a lot of tooling/libraries out of the box, such as routing, API calls etc. From this perspective you can get up and running very quickly. Next.js is a React framework, so we still write React code, but with Next.js lots of things just run out of the box. So why use Next.js over React, I guess the answer really is down to the developer experience, the speed and simplicity of getting things up and running. Life any framework that sits atop a library (or framework) such as React, we also need to be mindful that updates to React may not immediately appear in Next.js. Next.js supports SSR whereas, whilst (currently) React does not by default, but I know there’s lots going on with SSR on React.

As I’ve not used Next.js for anything other than learning I cannot say whether one should use Next.js over React or vice versa, but certainly getting up and running with Next.js is simple and as mentioned, some stuff such as routing is built in, so we don’t need to worry about that, but then once your React app has all those libraries what’s the gain in being with Next.js? I don’t have enough experience with Next.js to answer that, so let’s just get started and play…

Getting up and running

This is just a very short getting started (I’m using the current latest which is 14.0.4)

yarn create next-app

Note: Add @latest if you prefer to the command or the version you want to work with

You’ll be prompted for the name of your app as well as other configuration parameters. All I did was give the application a name and stick with all the default parameters, I am using TypeScript so ensure that one’s selected if you’re following through with the code here.

The app folder contains the page.tsx file which is essentially our main page.

Once create we can run the app using the following to run the development server

yarn dev

Bu default this will use port 3000, if you want to run on a different port change the dev script in package.json like this or when you run dev it will automatically pick the next port.

"dev": "next dev -p 3001",

Further configuration for Next.js takes place in the next.config.js file in the route folder of your app (i.e. where package.json is) and it’s a .js as it’s not passed to the Typescript (or Babel) transpiler.

With Next.js the app folder (as you’d probably expect) is where we find the entry point to our application, in the page.tsx file.

As mentioned, Next.js is built upon React, so we can start coding React components just like a CRA created application.