NextJs Tag

New Features in Next.js 13

Next.js 13 has landed in a somewhat confusing way. Many remarkable things have been added; however, a good part is still Beta. Nevertheless, the Beta features give us important signals on how the future of Next.js will be shaped, so there are good reasons to keep a close eye on them, even if you’re going to wait to adopt them.

This article is part of a series of experiences about the Beta features. Let’s play with Server Components today.

Making server components the default option is arguably the boldest change made in Next.js 13. The goal of server component is to reduce the size of JS shipped to the client by keeping component code only on the server side. I.e., the rendering happens and only happens on the server side, even if the loading of the component is triggered on the client side (via client-side routing). It’s quite a big paradigm shift.

It feels quite “reasearch-y” by then, so it was shocking when seeing that Next.js is already betting its future on it now. Time flies and the fantastic engineers from React must have done some really great work.

npx create-next-app@latest --experimental-app --ts --eslint next13-server-components

Let’s have some fun playing with the project.

Server Component

The first difference noticed is that a new app folder now sits along with old friend page. They’ll save the routing changes to another article, but what’s worth mentioning for now is that every component under the app folder is, by default, a server component, meaning that it’s rendered on the server side, and its code stays on the server side.

Let’s create our very first server component now:

// app/server/page.tsx

export default function Server() {
    console.log('Server page rendering: this should only be printed on the server');
    return (
        <div>
            <h1>Server Page</h1>
            <p>My secret key: {process.env.MY_SECRET_ENV}</p>
        </div>
    );
}

If you access the /server route, whether by a fresh browser load or client-side routing, you’ll only see the line of log printed in your server console but never in the browser console. The environment variable value is fetched from the server side as well.

Looking at network traffic in the browser, you’ll see the content of the Server component is loaded via a remote call which returns an octet stream of JSON data of the render result:

Pic courtesy: medium.com

{
    ...
    "childProp": {
        "current": [
            [
                "$",
                "div",
                null,
                {
                    "children": [
                        ["$", "h1", null, { "children": "Server Page" }],
                        [
                            "$",
                            "p",
                            null,
                            {
                                "children": ["My secret key: ", "abc123"]
                            }
                        ]
                    ]
                }
            ]
        ]
    }
}

Rendering a server component is literally an API call to get serialized virtual DOM and then materialize it in the browser.

The most important thing to remember is that server components are for rendering non-interactive content, so there are no event handlers, no React hooks, and no browser-only APIs.

The most significant benefit is you can freely access any backend resource and secrets in server components. It’s safer (data don’t leak) and faster (code doesn’t leak).

Client Component

To make a client component, you’ll need to mark it so explicitly with use client:

// app/client/page.tsx

'use client';

import { useEffect } from 'react';

export default function Client() {
    console.log(
        'Client page rendering: this should only be printed on the server during ssr, and client when routing'
    );

    useEffect(() => {
        console.log('Client component rendered');
    });

    return (
        <div>
            <h1>Client Page</h1>
            {/* Uncommenting this will result in an error complaining about inconsistent
            rendering between client and server, which is very true */}
            {/* <p>My secret env: {process.env.MY_SECRET_ENV}</p> */}
        </div>
    );
}

As you may already anticipate, this gives you a similar behavior to the previous Next.js versions.

When the page is first loaded, it’s rendered by SSR, so you should see the first log in the server console; during client-side routing, both log messages will appear in the browser console.

Mix and Match

One of the biggest differences between Server Component and SSR is that SSR is at page level, while Server Component, as its name says, is at component level. This means you can mix and match server and client components in a render tree as you wish.

// A server page containing client component and nested server component

// app/mixmatch/page.tsx
import Client from './client';
import NestedServer from './nested-server';

export default function MixMatchPage() {
    console.log('MixMatchPage rendering');
    return (
        <div>
            <h1>Server Page</h1>
            <div className="box">
                <Client message="A message from server">
                    <NestedServer />
                </Client>
            </div>
        </div>
    );
}

// app/mixmatch/client.tsx
'use client';

import { useEffect } from 'react';

export default function Client({
    message,
    children,
}: {
    message: string;
    children: React.ReactNode;
}) {
    console.log('Client component rendering');

    return (
        <div>
            <h2>Client Child</h2>
            <p>Message from parent: {message}</p>
            <div className="box-red">{children}</div>
        </div>
    );
}

// app/mixmatch/nested-server.tsx

export default function NestedServer() {
    console.log('Nested server component rendering');
    return (
        <div>
            <h3>Nested Server</h3>
            <p>Nested server content</p>
        </div>
    );
}

Pic courtesy: medium.com

In a mixed scenario like this, server and client components get rendered independently, and the results are assembled by React runtime. Props passed from server components to client ones are serialized across the network (and need to be serializable).

Server Components Can Degenerate

One caution you need to take is that if a server component is directly imported into a client one, it silently degenerates into a client component.

Let’s revise the previous example slightly to observe it:

// app/degenerate/page.tsx

import Client from './client';

export default function DegeneratePage() {
    console.log('Degenerated page rendering');
    return (
        <div>
            <h1>Degenerated Page</h1>
            <div className="box-blue">
                <Client message="A message from server" />
            </div>
        </div>
    );
}

// app/degenerate/client.tsx

'use client';

import NestedServer from './nested-server';

export default function Client({ message }: { message: string }) {
    console.log('Client component rendering');

    return (
        <div>
            <h2>Client Child</h2>
            <p>Message from parent: {message}</p>
            <div className="box-blue">
                <NestedServer />
            </div>
        </div>
    );
}

// app/degenerated/nested-server.tsx

export default function NestedServer() {
    console.log('Nested server component rendering');
    return (
        <div>
            <h3>Degenerated Server</h3>
            <p>Degenerated server content</p>
        </div>
    );
}

If you check out the log, you’ll see NestedServer has “degenerated” and is now rendered by the browser.

For more information and to develop web applications using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com

What’s new in Next.js 13

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

// app/page.js

// This file maps to the index route (/)

export default function Page() {

return <h1>Hello, Next.js!</h1>;

}

// app/blog/layout.js

export default function BlogLayout({ children }) {

return <section>{children}</section>;

}

// app/page.js

async function getData() {

const res = await fetch(‘https://api.example.com/…’);

// The return value is *not* serialized

// You can return Date, Map, Set, etc.

return res.json();

}

// This is an async Server Component

export default async function Page() {

const data = await getData();

return <main>{/* … */}</main>;

}

// This request should be cached until manually invalidated.

// Similar to `getStaticProps`.

// `force-cache` is the default and can be omitted.

fetch(URL, { cache: ‘force-cache’ });

 

// This request should be refetched on every request.

// Similar to `getServerSideProps`.

fetch(URL, { cache: ‘no-store’ });

 

// This request should be cached with a lifetime of 10 seconds.

// Similar to `getStaticProps` with the `revalidate` option.

fetch(URL, { next: { revalidate: 10 } });

Note: Turbopack in Next.js currently only supports next dev. View the supported features. We are also working to add support for next build through Turbopack.

import Image from ‘next/image’;

import avatar from ‘./lee.png’;

 

function Home() {

// “alt” is now required for improved accessibility

// optional: image files can be colocated inside the app/ directory

return <Image alt=”leeerob” src={avatar} placeholder=”blur” />;

}

npx @next/codemod next-image-to-legacy-image ./pages

import { Inter } from ‘@next/font/google’;

const inter = Inter();

<html className={inter.className}>

import localFont from ‘@next/font/local’;

const myFont = localFont({ src: ‘./my-font.woff2’ });

<html className={myFont.className}>

import Link from ‘next/link’

// Next.js 12: `<a>` has to be nested otherwise it’s excluded

<Link href=”/about”>

<a>About</a>

</Link>

&nbsp;

// Next.js 13: `<Link>` always renders `<a>`

<Link href=”/about”>

About

</Link>

npx @next/codemod new-link ./pages

// pages/api/og.jsx

import { ImageResponse } from ‘@vercel/og’;

export const config = {

runtime: ‘experimental-edge’,

};

export default function () {

return new ImageResponse(

(

<div

style={{

display: ‘flex’,

fontSize: 128,

background: ‘white’,

width: ‘100%’,

height: ‘100%’,

}}

&nbsp;

Hello, World!

</div>

),

);

}

// middleware.ts

import { NextResponse } from ‘next/server’;

import type { NextRequest } from ‘next/server’;

 

export function middleware(request: NextRequest) {

// Clone the request headers and set a new header `x-version`

const requestHeaders = new Headers(request.headers);

requestHeaders.set(‘x-version’, ’13’);

// You can also set request headers in NextResponse.rewrite

const response = NextResponse.next({

request: {

// New request headers

headers: requestHeaders,

},

});

// Set a new response header `x-version`

response.headers.set(‘x-version’, ’13’);

return response;

}

// middleware.ts

import { NextRequest, NextResponse } from ‘next/server’;

import { isAuthenticated } from ‘@lib/auth’; //

 

Limit the middleware to paths starting with `/api/`

export const config = {

matcher: ‘/api/:function*’,

};

 

export function middleware(request: NextRequest) {

// Call our authentication function to check the request

if (!isAuthenticated(request)) {

// Respond with JSON indicating an error message

return NextResponse.json(

{

success: false,

message: ‘Auth failed’,

},

{

status: 401,

},

);

}

}

Creating a Progressive Web Application using Next JS

In this article, you will learn about the progressive web app, and why PWA is gaining popularity, and also you can create a simple PWA app using NextJs.

Overview

• Progressive Web App
• Project setup with NextJs
• PWA implementation

Progressive Web App ( PWA )

PWA = web + experience of a native application

What is PWA?

The progressive web app is a simple web application that runs on a web browser similar to that of a website and provides an installable feature on a mobile device. PWA gives you a rich mobile experience via native-like functionalities such as the ability to work offline, push notifications, device hardware accessibility, and many more. Web applications can reach anyone, anywhere, on any device with a single codebase as a result PWA is more special. PWA offers the same experience as the native app and you need not download it from an app store or play store. PWA loads runs and functions in a web browser.

The Native app is known for rich and reliable with its own standalone user experience, the web app are best for reachability. Progressive Web Apps combine the best features of both native and web apps, including native-like functionality, dependability across all platforms with a single codebase, installability, and accessibility to anyone, anywhere. They are designed, developed, and enhanced using cutting-edge and modern APIs.

Why PWA?

Some people may wonder why we need PWA if we can have a separate version of apps like android, IOS, and web. The PWA is gaining popularity because of the following features:

1. Installable: Installable on a mobile device and available via the device’s home screen. A PWA feels like a native app on the device with an immersive user experience.
2. Offline support: PWA offers the same services as on the web. If you try to load a website without internet connectivity, you will get a message saying you are offline. On the other hand, Progressive Web page enables you to connect to the website, even when you are offline that being said you must visit the PWA at least once before, in an online mode.
3. Platform independence: As you know native mobile apps are platform-specific, and can only be accessed from their respective OS like Android or iOS whereas PWA’s are platform independent and can run independently of any OS since they are browser-based.
4. Background synchronization: In the mobile application, you have to frequently re-install or update the apps when the new or additional features in the app are integrated. But in the case of PWA, the content is updated in the progressive web apps in the background, and new features are automatically integrated within the website, with a simple page refresh.
5. Cost-effective: PWA is quicker to develop with a lesser developmental cost making it cost-effective.
6. Enhance Loading Speed: As compared to normal websites, PWA has an instant loading time. As it is based on the method of intelligent caching, the first load, as well as the subsequent loads, are faster. Due to this, the bounce rate for PWA is lower compared to mobile websites.

Project Setup with NextJs

You will use NEXTJS to implement the PWA which is a react framework for developing feature-rich frontend web applications. Now, Let’s create the project executing any commands mentioned below in your terminal based on the package management tool that you have.

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

After executing the command you will have a pre-configured NextJs project.

PWA Implementation

Now you will work on the implementation of PWA in the project that you just configured. For PWA implementation you will make use of next-pwa which is a zero-config PWA Plugin for NextJs. Let’s install the plugin in the project using the command below:

yarn add next-pwa

npm install next-pwa

Step 1: withPWA

Now, update or create next.config.js

/** @type {import('next').NextConfig} */
const runtimeCaching = require("next-pwa/cache");
const withPWA = require("next-pwa")({
disable: process.env.NODE_ENV === "development",
dest: "public",
register: true,
skipWaiting: false,
runtimeCaching,
});
const nextConfig = withPWA({});

module.exports = nextConfig;

After running next build, this will generate two files in your public: workbox-*.js and sw.js, which will automatically be served statically.

Step 2: Create a custom server ( optional )

This step is optional. So if you want to use a custom server then you can proceed with this step. To create a custom server using express the root of the project with the file name server.js in order to load the service work. For creating the express server, you need to add express into the project

yarn add express

npm install express

const express = require("express");
const next = require("next");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({
dev,
});

const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("/service-worker.js", (req, res) => {
app.serveStatic(req, res, "./.next/service-worker.js");
});

server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(port, (err) => {
if (err) throw err;
});
});

Step 3: Creating and adding Manifest File

You have to generate the manifest file inside the public folder in the project. For this, you can use any online tool for generating the manifest file.

Pic courtesy: medium.com

Fill in all the information and generate the manifest file. After that copy the content into the public directory and rename the file as manifest.json

Pic courtesy: medium.com

So now lets _document.tsx page and include the manifest.json link inside the Head tag as below:

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/logo.png"></link>
<meta name="theme-color" content="#fff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

export default MyDocument;

You have successfully configured your project with PWA up to this point. Now run the following command and build the project.

yarn build

npm build

After build completion starts the build app using the following command:

yarn start

npm start

Pic courtesy: medium.com

When the app is started, you can see an install icon at the top of the browser like in the above image. Now you can install and use the app.

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. medium.com

What’s new in Next.Js

This RFC outlines the biggest update to Next.js since it was introduced in 2016:

• Nested Layouts: Build complex applications with nested routes.
• Designed for Server Components: Optimized for subtree navigation.
• Improved Data Fetching: Fetch in layouts while avoiding waterfalls.
• Using React 18 Features: Streaming, Transitions, and Suspense.
• Client and Server Routing: Server-centric routing with SPA-like behavior.
• 100% incrementally adoptable: No breaking changes so you can adapt gradually.
• Advanced Routing Conventions: Offscreen stashing, instant transitions, and more.

The new Next.js router will be built on top of the recently released React 18 features.

Terminology

This RFC introduces new routing conventions and syntax. The terminology is based on React and standard web platform terms. Throughout the RFC, you’ll see these terms linked back to their definitions below.

• Tree: A convention for visualizing a hierarchical structure. For example, a component tree with parent and children components, a folder structure, etc.
• Subtree Part of the tree, starting at the root (first) and ending at the leaves (last).

Pic courtesy: nextjs.org

URL Path: Part of the URL that comes after the domain.
URL Segment: Part of the URL path is delimited by slashes.

Pic courtesy: nextjs.org

Introducing the App Folder

Pic courtesy: nextjs.org

To ensure these new improvements can be incrementally adopted and avoid breaking changes, there is a proposed new directory called app.

The app directory will work alongside the page directory. You can incrementally move parts of your application to the new app directory to take advantage of the new features. For backward compatibility, the behavior of the page directory will remain the same and continue to be supported.

Defining Routes

Pic courtesy: nextjs.org

You can use the folder hierarchy inside the app to define routes. A route is a single path of nested folders, following the hierarchy from the root folder down to a final leaf folder.

For example, you can add a new /dashboard/settings route by nesting two new folders in the app directory.

Note:

With this system, you'll use folders to define routes, and files to define UI (with new file conventions such as layout.js, page.js, and in the second part of the RFC loading.js).
This allows you to colocate your own project files (UI components, test files, stories, etc) inside the app directory. Currently this is only possible with the pageExtensions config.

Route Segments

Each folder in the subtree represents a route segment. Each route segment is mapped to a corresponding segment in a URL path.

Pic courtesy: nextjs.org

For example, the /dashboard/settings route is composed of 3 segments:

The / root segment
The dashboard segment
The settings segment

Note: The name route segment was chosen to match the existing terminology around URL paths.

Layouts

New file convention: layout.js

So far, the folders are used to define the routes of our application. But empty folders do not do anything by themselves.

A layout is UI that is shared between route segments in a subtree. Layouts do not affect URL paths and do not re-render (React state is preserved) when a user navigates between sibling segments.

A layout can be defined by default exporting a React component from a layout.js file. The component should accept a children prop which will be populated with the segments the layout is wrapping.

There are 2 types of layouts:

Root layout: Applies to all routes
Regular layout: Applies to specific routes

You can nest two or more layouts together to form nested layouts.

Root layout

Pic courtesy: nextjs.org

You can create a root layout that will apply to all routes of your application by adding a layout.js file inside the app folder.

Note:

The root layout replaces the need for a custom App (_app.js) and custom Document (_document.js) since it applies to all routes.
You'll be able to use the root layout to customize the initial document shell (e.g. <html> and <body> tags).
You'll be able to use data fetching methods inside the root layout (and other layouts).

Regular layouts

Pic courtesy: nextjs.org

You can also create a layout that only applies to a part of your application by adding a layout.js file inside a specific folder.

For example, you can create a layout.js file inside the dashboard folder which will only apply to the route segments inside dashboard.

Nesting layouts

Pic courtesy: nextjs.org

Layouts are nested by default.

Pic courtesy: nextjs.org

For example, if it were to combine the two layouts above. The root layout (app/layout.js) would be applied to the dashboard layout, which would also apply to all route segments inside dashboard/*.

Pages

New file convention: page.js

Pic courtesy: nextjs.org

A page is UI that is unique to a route segment. You can create a page by adding a page.js file inside a folder.

Pic courtesy: nextjs.org

For example, to create pages for the /dashboard/* routes, you can add a page.js file inside each folder. When a user visits /dashboard/settings, Next.js will render the page.js file for the settings folder wrapped in any layouts that exist further up the subtree.

Pic courtesy: nextjs.org

You can create a page.js file directly inside the dashboard folder to match the /dashboard route. The dashboard layout will also apply to this page:

This route is composed of 2 segments:

• The / root segment
• The dashboard segment

Note:

For a route to be valid, it needs to have a page in its leaf segment. If it doesn't, the route will throw an error.

Layout and Page Behavior

• The file extensions js|jsx|ts|tsx can be used for Pages and Layouts.
• Page Components are the default export of page.js.
• Layout Components are the default export of layout.js.
• Layout Components must accept a children prop.

When a layout component is rendered, the children prop will be populated with a child layout (if it exists further down the subtree) or a page.

It may be easier to visualize it as a layout tree where the parent layout will pick the nearest child layout until it reaches a page.

For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop custom web apps using React JS, please visit our technology page.

Content Source:

1. nextjs.org