What is Nextjs ?

Is it a framework ? Is it a static site generator ? Is it a server side rendering framework ? Is it overhyped ?

Yes !

Next js is a framework which uses react as its base. Let’s explore some of it.

Nextjs as a framework

Routing

Nextjs provides a good structure of application by providing directory based routing for pages. We can create a route by creating a file named page.tsx in the app directory and the directory path will follow the route path.

eg:

app/
 ├─page.tsx
 ├─layout.tsx
 ├─contact/
 │  └─page.tsx
 └─about/
    └─page.tsx

will create routes /, /contact and /about.

API Routes

Nextjs also provides route handlers which can be used to create API routes. This is very useful to create serverless functions.

Nextjs as a static site generator

Nextjs can be used to generate static sites. Nextjs will render all the pages at build time and creates a static bundle with html, css and js files. This is very useful to create a static site which can be hosted in a CDN.

You can export the site by adding nextjs config in next.config.js file.

const nextConfig = {
  distDir: "build",
  output: "export",
};

export default nextConfig;

This will export the app as a static site to build folder. The build folder will contain all the static files, which can be hosted using any static hosting solution.

Nextjs as a server side rendering framework

Nextjs also works as a server which can render html pages. It can execute javascript, render the pages at server side and send the rendered html to the client.

The next server can listen to a port and serve requests like any other server.

Additionally there are multiple models such are Incremental Static Regeneration, Caching etc… which can be used to optimize the server. ( In layman’s terms: some patterns to solve the problems that comes with js usage for servers )

Route Component files

There are different files which will be used to wrap a page or route.

layout.tsx            Layout, persistent across children
template.tsx          Layout, local to the page
error.tsx             Error UI (error boundary)
loading.tsx           Loading UI (suspense)
not-found.tsx         Not found UI (error boundary)
page.tsx              Page

These files will result in a component like this:

<Layout>
  <Template>
    <ErrorBoundary fallback={<Error />}>
      <Suspense fallback={<Loading />}>
        <ErrorBoundary fallback={<NotFound />}>
          <Page />
        </ErrorBoundary>
      </Suspense>
    </ErrorBoundary>
  </Template>
</Layout>

My thoughts

Nextjs in the world of react is an amazing solution. It provides a standard structure to the application and also provides static site generation capabilities. The features are very good and the ecosystem is also very good.

I’d take away only the static site generation capabilities because, javascript servers aren’t my favorite. Come on, it’s javascript. It’s a scripting language for the browser. I’m not a fan of the Idea of executing javascript at server side.

Since react is so huge, and have a great ecosystem around it. Nextjs is a good choice for a react based applications.

When nextjs is presented as a solution to a lot of react problems, It’s great but overall I think there are various methods to achieve 80% of what nextjs does in a better, secure and efficient way - with less javascript.

Such as Htmx