Subscribe

Next.js 13: Powerful Framework for Server-rendered Apps

Reading time: 5 minutes

A Next.js 101 

Next.js is an open-source framework for building web applications with React. It is designed to make it easier to create server-rendered React applications by providing a set of powerful features.

Next.js combines the benefits of server-side rendering (SSR), static site generation (SSG), and client-side rendering (CSR) into a single framework, allowing developers to choose the most appropriate rendering method.

Let’s Navigate Key Features of Next.js

  • Server-Side Rendering (SSR): Next.js enables you to render React components on the server and send them as fully rendered HTML to the client. This improves initial page load performance, facilitates SEO, and ensures that content is accessible to users.
  • Static Site Generation (SSG): it supports static site generation, which allows you to pre-render pages at build time. This is useful for content-driven websites. Static pages can be served from a CDN, resulting in excellent performance.
  • Incremental Static Regeneration (ISR): it brings a feature called Incremental Static Regeneration, allowing you to update static pages on-demand or periodically, without needing to rebuild the entire site. This is useful for frequent updates.
  • File-based Routing: Next.js follows a file-based routing system. Each file in the “pages” directory represents a route, making it easy to create new and define the structure of your app.
  • API Routes: it allows you to create serverless API endpoints using the same framework. Define API routes as separate files, enabling you to build backend functionality directly within your Next.js application.
  • Automatic Code Splitting: Next.js automatically splits JavaScript bundles based on the page’s components reducing the initial load time.
  • CSS and Sass Support: Next.js provides built-in support for CSS modules, CSS-in-JS libraries, and Sass, allowing you to import and use styles within your components effortlessly.
  • TypeScript Support: Next.js has built-in TypeScript support, making it easy to develop type-safe applications using React and Next.js.

Next.js is widely used in the React ecosystem and has gained popularity due to its simplicity, experience, and the performance benefits.

Let's cut to the chase: Next.js 13.4

It brings an app router stability built on top of the React canary channel.

Far be it from Next.js to say: work is done. But, stability stands for the core of the App Router being ready for production and validated by internal testing, as well as beta users.

Since the last release of Next.js 13, App Router has been on the spot to make it adaptable without deep changes. Start adopting the App Router right away:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Let’s go over how to use these new updates:

Firts, create a route from a single React component:

// Pages Router
// pages/about.js

import React from 'react';
export default () => <h1>About us</h1>;

As stated in Next.js blog, simply dropping a file inside the ‘pages/’ directory would handle the routing automatically. Loved by devs! However, as the framework gained popularity, they uttered the need for:

  • improved support in defining layouts
  • nesting UI components as layouts
  • having more flexibility in defining loading and error states.

Integrating these features into the existing Next.js router proved to be a challenging task, but feasible!

Every aspect, including page transitions, data fetching, caching, data mutation, revalidation, streaming, and content styling, had to be designed to work seamlessly with the router. Hence, the new version.

The current status of this endeavor is the result of the team’s efforts after the initial release of the Layouts RFC.

// New: App Router 
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
       <body>{children}</body>
    </html>
   );
}

// app/page.js
export default function Page() {
     return <h1>Hello, Next.js!</h1>;
}

The new router can be incrementally adopted through the app/ directory. I has a new architecture built on React Server Components and Suspense.

This enabled us to remove Next.js specific APIs. There’s no need for you to use a custom _app file to customize the global shared layout:

// Pages Router
// pages/_app.js

// This "global layout" wraps all routes. There's no way to
// compose other layout components, and you cannot fetch global
// data from this file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

With the Pages Router, layouts were not able to be composed, and data fetching could not be colocated with the component. With the new App Router, this is now supported.

// New: App Router 
// app/layout.js
//
// The root layout is shared for the entire application
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// app/dashboard/layout.js
//
// Layouts can be nested and composed
export default function DashboardLayout({ children }) {
  return (
    <section>
      <h1>Dashboard</h1>
      {children}
    </section>
  );
}

With the Pages Router, _document was used to customize the initial payload from the server.

// Pages Router
// pages/_document.js

// This file allows you to customize the <html> and <body> tags
// for the server request, but adds framework-specific features
// rather than writing HTML elements.
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
 return (
  <Html>
   <Head />
   <body>
     <Main />
     <NextScript />
  </body>
 </Html>
 );
}

With the App Router, you no longer need to import <Html>, <Head>, and <Body> from Next.js. Instead, you just use React.// 

// app/layout.js
//
// The root layout is shared for the entire application
export default function RootLayout({ children }) {
 return (
  <html lang="en">
   <body>{children}</body>
  </html>
 );
}

This re-planning time allowed next.js team to review and up the ante, they also enhanced the following:

  • Now, you can import (and colocate) any CSS file in any component.
  • The architecture has been updated to be deeply integrated with React Suspense, without blocking other components in the UI from being interactive.
  • Content can be instantly streamed from the server, improving the loading performance.

The router is the core of what makes Next.js work. But it’s not about the router itself, but how it integrates the rest of the pieces of the framework—like data fetching.

Here’s a video to get up and running with Next.js 13.4 writing

Let’s round up!

Even though we’ve given you a glimpse of the latest, there’s always more room for improvement and iterating instances. Here you’ll find more updates worth checking.

There’re also components you can integrate and use. An ally of React Native and Frontend devs.

In future blog and instagram posts, we’ll explore specific strategies and techniques for using mobile web analytics to drive business growth and success.

So stay tuned, and don’t forget to check out our other posts for more insights on digital marketing and data analytics!