DEV Community: Niaz Morshed

How to protect your private routes in Next.js 13 & Appwrite?

Niaz Morshed — Mon, 03 Jul 2023 03:19:53 +0000

Introduction

In modern web development, security is paramount, especially when it comes to protecting sensitive data or functionality behind authentication barriers. Next.js 13, a popular React framework, combined with Appwrite, a self-hosted backend as a service platform, offers a powerful solution for building secure web applications. In this blog post, we will explore how to protect your private routes in Next.js 13 using Appwrite authentication. By implementing this approach, you can ensure that your private routes remain inaccessible to unauthenticated users, enhancing the overall security of your application. Let's dive in!

Understand Next.js and Appwrite

Before diving into the details, let's take a higher-order look at what Next.js and Appwrite are. Next.js 13 is a powerful React framework that provides server-side rendering, static site generation, and other advanced features for building fast and scalable web applications. On the other hand, Appwrite is a backend as a service platform that simplifies common backend tasks, including user authentication, database management, and file storage. The combination of Next.js 13 and Appwrite empowers developers to create secure applications with ease.
Setting up Next.js and Appwrite

To begin, we need to set up a Next.js 13 project and integrate Appwrite into it. This involves creating a new Next.js project and configuring the Appwrite SDK. By establishing this connection, we can leverage the all capabilities of Appwrite in our Next.js application.

npx create-next-app <appname>

After running this command. Make sure your app is created and then change your directory to your app with:

cd <appname>

Now, let's install the Appwrite SDK by running the following command. (You can use yarn or pnpm or any of your choice)

npm install appwrite

With that setup, now we can move on to the next part of configuring appwrite into our Next.js application. Open your code editor 🧑‍💻🧑‍💻!!!

## Configuring Appwrite with Next.js

Now that we have appwrite in our app, it's time for us to use it with the best potential. Here is a folder structure I like, to manage appwrite services I'm using.

So first of all let's work on the appwrite folder. In your src folder make a new folder called appwrite and make a appwrite.ts file. Here is where we can manage apis to use different services of appwrite including authentication, database, storage and others.

For the sake of this tutorial I'll show just the authentication part for appwrite just to keep things clean. Now in your appwrite.ts file copy and paste this code and let's understand what it's doing.

import { LoginInterface, RegisterInterface } from "@/interfaces/auth.interface";
import { Account, Client as Appwrite, ID } from "appwrite";

let api: any = {
  sdk: null,

  provider: () => {
    if (api.sdk) {
      return api.sdk;
    }
    let appwrite = new Appwrite();
    appwrite
      .setEndpoint("https://cloud.appwrite.io/v1")
      .setProject("************");
    const account = new Account(appwrite);

    api.sdk = { account };
    return api.sdk;
  },

  createAccount: (registerBody: RegisterInterface) => {
    return api
      .provider()
      .account.create(
        ID.unique(),
        registerBody.email,
        registerBody.password,
        registerBody.fullName
      );
  },

  getAccount: () => {
    let account = api.provider().account;
    return account.get();
  },

  createSession: (loginBody: LoginInterface) => {
    return api
      .provider()
      .account.createEmailSession(loginBody.email, loginBody.password);
  },

  deleteCurrentSession: () => {
    return api.provider().account.deleteSession("current");
  },
};

export default api;

In this code, we create an api object where we instantiate Appwrite using new Appwrite() and connect it to our project using appwrite.setEndpoint("https://cloud.appwrite.io/v1").setProject("************").setProject("************")). You will obtain the project ID from your Appwrite account.

Next, we utilize new Account(appwrite) to access the authentication APIs provided by Appwrite.

After that, we define different functions for user registration, login, and authentication checking. These functions will be used to create services that can be efficiently utilized in our application.

Working with the services folder

Now that we defined different functions for auth in the appwrite.ts file it's time to gather all our services in one place! Create a new folder with the name lib and inside that create services folder. Here create a auth.service.ts file. Here we'll write our auth services in one place so it's easy for us to manage.

Now that you created let's copy and paste these code in `auth.service.ts` file.

import api from "@/appwrite/appwrite";
import { LoginInterface, RegisterInterface } from "@/interfaces/auth.interface";

export const register = async (registerBody: RegisterInterface) => {
  try {
    const user = await api.createAccount(registerBody);
  } catch (error) {
    console.error("Error occurred during registration:", error);
    throw error;
  }
};

export const login = async (loginBody: LoginInterface) => {
  try {
    const session = await api.createSession(loginBody);
    if (session) {
      const account = await api.getAccount();
      return account;
    }
  } catch (error) {
    console.error("Error occurred during login:", error);
    throw error;
  }
};

export const getSession = async () => {
  try {
    const account = await api.getAccount();
    return account;
  } catch (error) {
    console.error("Error occurred during getSession:", error);
  }
};

In this file we created three services. One for register , one for login and one for cheking session (getSession). Notice that we used the functions that we already wrote in the appwrite.ts file.

Login and Signup

Now that we have services set up, create your login and signup folder inside the the (auth) group route. It will allow us to wrap our auth pages with a layout where we will check if the user is authenticated or not. If he is authenticated in this case we will redirect him to the main page of the app. Which will look in shortly.

On both pages write as usual forms and use the `login` and `register` services exported from `auth.service.ts` . Now that have we created the login and register pages, it is now time to validate the user and implement the security of protected routes.

Protect private routes 🔒🔒

Now comes the final part of protecting our private routes. In order to protect your routes. Wrap your routes inside a group like (protected) and add pages inside that group. But why we added this group? We added this to check users' session in the layout.tsx file of this group and perform our actions for the unauthenticated user, in our case redirecting him to another page. Here is what it should look like:

Now let's look at the code of `layout.tsx` file to understand how it works in real. Look at the closely:

"use client";

import Logo from "@/components/Logo";
import { Toaster } from "@/components/ui/toaster";
import { useToast } from "@/components/ui/use-toast";
import { getSession } from "@/lib/services/auth.service";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";

interface Props {
  children: React.ReactNode;
}

const ProtectedLayout: React.FC<Props> = ({ children }) => {
  const router = useRouter();
  const { toast } = useToast();
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const checkSession = async () => {
      try {
        const session = await getSession();
        if (!session) {
          toast({
            variant: "destructive",
            title: "Session Expired",
          });
          router.push("/login");
          localStorage.clear();
        }
        setLoading(false);
      } catch (error) {
        router.push("/login");
        setLoading(false);
      }
    };

    checkSession();
  }, []);
  return (
    <>
      {loading ? (
        <>
          <main className="w-screen h-screen fixed flex items-center justify-center">
            <Logo className="animate-pulse" />
          </main>
        </>
      ) : (
        <>
          {children}
          <Toaster />
        </>
      )}
    </>
  );
};

export default ProtectedLayout;

Let's break it down together! In order to check users session we will need to use the react client component. But not freak if we create holes for other components to fit in this component with {children} that will allow the any childrens to be server or client components.

Now get back to the main part. We created a loading state to show some user-friendly loader when we are checking the session of user. Next in the useEffect hook we all using the getSession service that we defined in the auth.service.ts file. After checking the session we can do whatever we wish for authenticated and unauthenticated user. In my case, for authenticated user I just set the loading state to false. And for unauthenticated user I performed some actions and redirected him back to the auth page.

Similarly, you can check the user session in the (auth) group and redirect users to dashboard/main page if the user is logged in.

Ad tada~~~!! You are now able to secure you application! 🔥🔥🔒

Learning resources

If you are looking for an example of how to work with Next.js 13 with Appwrite efficiently check out my repository on github. It has some best practices defined. Btw, stars ⭐ are appreciated 😜

The repository: https://github.com/NiazMorshed2007/popwola

Questions?

If we haven't understand any part of it of have confusion feel free to ask in the comments. I'll be happy to help!

Popwola | Your no-code popup builder | Appwrite x Hashnode Hackathon

Niaz Morshed — Sat, 10 Jun 2023 15:18:44 +0000

Team Members

Niaz Morshed | Niaz Morshed

Description

Popwola is a no-code popup builder that simplifies the process of creating captivating popups. With its user-friendly interface and customizable templates, you can effortlessly design visually stunning popups without any coding complexities. Popwola also offers a preview option and timeline management for precise control over popup display. Boost user engagement and drive conversions with Popwola's seamless and efficient popup creation solution.

The problem we aimed to solve

In today's digital landscape, user engagement is paramount for the success of online businesses and websites. Popups have proven to be highly effective in capturing attention and driving conversions. However, the process of creating popups often presents challenges, such as coding complexities, time-consuming tasks, and repetitive work. These tasks can be a significant drain on valuable time that could be better spent on coding innovative solutions. Recognizing this issue, Popwola was developed to provide a solution.

Introducing Popwola - The solution

Popwola is a game-changing solution that addresses the challenges stated above.

Here is how it solves the problem (i.e Features) 👇👇

Beautiful dashboard for managing: 🏠

Popwola provides a beautiful and intuitive dashboard that simplifies the management of your popups. Easily navigate through your popup campaigns, and make necessary adjustments, all within a visually appealing and user-friendly interface.

No-code editor: 🔨

With Popwola's no-code editor, you can create stunning popups without any coding required. Say goodbye to the complexities of coding and enjoy a seamless popup building experience. Customize the design, layout, and content of your popups effortlessly, making them visually captivating and engaging for your audience.

Timeline management: ⌚

Take full control over the display duration of your popups with Popwola's timeline management feature. Specify the start and end dates for each popup, ensuring they appear at the right time and align with your promotional campaigns. This feature allows you to create a sense of urgency or time-sensitive offers, maximizing their impact on user engagement and conversions.
Preview Option: 👁️

Popwola offers a preview option that allows you to see exactly how your popups will appear on your website before going live. This feature enables you to optimize the design, layout, and messaging of your popups, ensuring they are visually appealing and effective in capturing your audience's attention.
Connect all with a single script! 🪄⚡

Say no to complex integrations. With Popwola, you can connect your popups to your website with just a single script. This streamlined integration saves you time and effort, allowing you to focus on creating compelling popup campaigns without the hassle of complicated setup processes.

Development Phases

Planning

Yes, every successful project begins with careful planning. Recognizing the importance of laying a strong foundation, I dedicated long hours to meticulous planning. This involved selecting the key features, anticipating potential challenges, outlining the UI skeleton, mapping out the user journey, and conceptualizing the overall app design. To capture this pivotal moment, here's a picture that showcases my dedicated effort to planning...

After planning, it turns out that a lot of features could be implemented including conversion rate tracking, analytics, lead collection and many more. But I focused on some selected features for this release. The selected features are already mentioned on top.

Designing

The design phase is a crucial stage in the development process, where the visual aesthetics and user experience of the project come to life. Here's an overview of the key steps involved in the design phase:

i) Gathering Requirements: After carefully analyzing the project requirements, I identified the key pages that needed design attention. These pages include:

* A dashboard page for displaying instructions and important information.

* A profile page for users to customize their profiles.

* A campaigns page where all available campaigns will be listed.

* A campaign creation page for users to create new campaigns.

* An editor page for designing popups.

* A preview page for users to preview their campaigns.

* A library page for listing all available campaigns.

ii) Research and Inspiration: To ensure a fresh and innovative design approach, I conducted thorough research and drew inspiration from various sources. Platforms like Dribbble and other design communities provided valuable insights and ideas. By immersing myself in design inspirations, I gained a clearer vision of the desired aesthetics and user experience.

Coding the App

During the coding phase, it was mixed feelings of cry and joy. I brought the visual designs to life by implementing the functionalities of Popwola. Leveraging technologies like Next.js 13, Appwrite and TypeScript, I created reusable UI components and integrated features such as the no-code editor, timeline management, and preview option. Version control tools facilitated collaboration and maintained code integrity throughout the development process. The coding phase transformed the design into a fully functional app, ready to empower users with a seamless no-code popup building experience.

Tech stack used

Popwola is built on top of hot technlogies including:

Next.js: A popular React framework for building fast and scalable applications.
Appwrite: An open-source backend server that simplifies the development process.
shadcn/ui: A bunch of components kit for creating stunning UI.
Redux: For state management
TypeScript: A statically typed superset of JavaScript that enhances code maintainability and developer productivity.
Tailwind: A utility-first CSS framework that enables rapid UI development with pre-built components and customizable styling.

Features of appwrite used

Authentication: 🔒

I utilized Appwrite's incredibly user-friendly authentication system to add authentication to my app. I thoroughly enjoyed working with it!
Appwrite Database: 📃

I leveraged the database to store data for my app. The document-based permission feature was particularly impressive and greatly enhanced data security.
Appwrite Storage: 🏬

I integrated Appwrite's storage functionality to store popup images uploaded by users. This feature provided a seamless experience for managing and retrieving user-generated content.

Challenges I faced building it

Getting Familiar with Appwrite:

When I first started using Appwrite, it took me some time to grasp its features and become comfortable with its functionalities. However, once I gained a better understanding, working with it became an enjoyable experience.
Setting Up Redux with the Editor:

Integrating Redux with the editor posed a challenge. It required some effort to configure and establish the necessary connections between the two. However, once everything was properly set up, it greatly enhanced the functionality and user experience of the project.
Creating the script-min.js File for Seamless Popup Handling

To ensure smooth and seamless handling of popups, I had to create the script-min.js file. This involved carefully designing the script to handle popups in a way that provided a seamless and user-friendly interaction. Although it required some extra work, the end result greatly improved the overall usability of the project.

Public Code Repository 🧑‍💻

Here is a link to the public Github repo:

https://github.com/NiazMorshed2007/popwola

Live App

Start building popups here: https://popwola.vercel.app/

A video recording showing the workflow

This project has significant potential for growth and can effectively solve real-world problems. As an open-source initiative, it offers a valuable opportunity for collaboration and innovation in the realm of popup building. By expanding customization options, improving integration compatibility, implementing analytics capabilities, ensuring responsive design, and providing robust documentation and community support, this project can become a go-to resource for developers seeking to create powerful and user-friendly popups.

And, I had an incredible journey working on this project for the hackathon. Despite starting nearly two weeks behind schedule, I put in the effort and completed it successfully. I want to extend my heartfelt thanks to Appwrite and Hashnode for arranging this fantastic hackathon! I am truly grateful for the opportunity they provided and for their support throughout the process.

Appwrite #AppwriteHackathon

A comprehensive guide to Next.js 13 App Router - Part 1

Niaz Morshed — Fri, 26 May 2023 17:15:58 +0000

Next.js is a powerful framework for building server-side rendered React applications. One of its key features for routing is the App Router which was introduced in version 13, which allows you to define and organize routes in your Next.js application. In this comprehensive guide, we will explore the main concepts and techniques of Next.js App Router, providing you with the knowledge to effectively navigate and structure your Next.js applications. Let's dive straight into it 🚀

Creating Routes

In Next.js version 12 we were used to create routes with a js / jsx or ts / tsx file inside the pages directory. But now in version 13 we define routes inside the app directory, with a directory (note: not a file). Each folder/direcotry represents a route segment that maps to a URL segment. Here is a visual for you to understand:

Now we can use a special file page.js to make our pages accessible. If you don't add any page.js file inside route folder we won't see anything on the route.

Here the analytics route will not work because it hasn't any page.js inside it. This folder could be used to store components, stylesheets, images, or other colocated files.

Here is a code example of creating app/page.js page.

// `app/page.js` is the UI for the `/` URL
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Layout

A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render.

To define a layout, you can start by creating a file called layout.js within the desired directory. This file will export a default React component that represents the layout. The component should accept a children prop, which will be populated with either a "child layout" or a "child page" during rendering.

For instance, let's consider a Typescript example of a layout.tsx file located at app/dashboard/layout.tsx:

export default function DashboardLayout({
  children, // represents a page or nested layout
}: {
  children: React.ReactNode;
}) {
  return (
    <section>
      {/* Include shared UI here, such as a header or sidebar */}
      <nav></nav>

      {children}
    </section>
  );
}

In this example, the DashboardLayout component serves as the default layout for the dashboard section of your application. It receives the children prop, which dynamically renders the content within the layout. The children prop can be a page or another nested layout. Here is a visual for you to understand better:

Dynamic Routes

In Next.js App Router, dynamic routes allow you to generate routes based on dynamic data, making it easy to handle varying segment names and create dynamic paths. Whether you need to generate routes at request time or pre-render them during build time, dynamic segments provide the flexibility you need.

Convention for Dynamic Segments

To create a dynamic segment, you can enclose a folder's name in square brackets, such as [folderName]. For example, [id] or [slug] can be used as dynamic segments.

Dynamic segments are then passed as the params prop to layout, page, route, and generateMetadata functions, allowing you to access the dynamic values within your components.

Example: Blog routes

For instance, if you have a blog where each post has a unique slug, you can define a route like this: app/blog/[slug]/page.js, where [slug] represents the dynamic segment for the blog posts.

export default function Page({ params }) {
  return <div>My Post</div>;
}

In this example, the Page component receives the params prop, which contains the dynamic values from the URL. For the URL /blog/a, params would be { slug: 'a' }, allowing you to render the appropriate content based on the dynamic segment.

Generating Static Params

To generate routes at build time, you can use the generateStaticParams function in combination with dynamic route segments. This function allows you to retrieve data smartly and efficiently, reducing build times by automatically deduplicating fetch requests with the same arguments.

For example, let's consider an example of generating static params for the blog post routes:

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json());

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

In this scenario, the generateStaticParams function fetches the blog posts and generates the static params based on the retrieved data. This approach improves performance by pre-rendering the routes during the build process.

Catch-all Segments

Dynamic segments can be extended to match subsequent segments by adding an ellipsis inside the brackets, such as [...folderName]. For example, app/shop/[...slug]/page.js would match /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts, and so on.

Optional Catch-all Segments

Additionally, catch-all segments can be made optional by including the parameter in double square brackets, like [[...folderName]]. This allows the route to match with or without the catch-all segment. For example, app/shop/[[...slug]]/page.js would match /shop, as well as /shop/clothes, /shop/clothes/tops, and /shop/clothes/tops/t-shirts.

By utilizing dynamic routes and their variations, you can create powerful and flexible routing structures in your Next.js applications. Whether you need to handle dynamic data or generate routes dynamically, these features provide the necessary tools to build dynamic and engaging user experiences.

Resources

Next.js Docs: https://nextjs.org/docs/app/building-your-application/routing

Hey! You reached the bottom. Thanks for the read 😍

Stay tuned for Part 2 of a comprehensive guide to Next.js App Router, where we'll explore more advanced techniques and features to further enhance your application's routing capabilities.

If you want to connect with me or want to have a chat, feel free to connect with me. I would like to talk to you!

- Twitter

- Github

- Linkedin

Ensure Code Separation in Next.js: Server Only vs Client Components

Niaz Morshed — Wed, 24 May 2023 17:15:45 +0000

Next.js is a popular framework for building server-rendered React applications. However, when JavaScript modules are shared between server and client components, it can introduce a potential vulnerability. This blog post will explore the risks associated with server-only code leaking into client components and present a solution using the "server-only" package in Next.js. We will learn how to identify and restrict server-specific code from being imported into client components, ensuring code integrity and security.

Understanding the Risk

When developing web applications, it is essential to differentiate between code that should only run on the server and code suitable for client-side execution. Failure to do so can result in the leakage of sensitive information or the execution of code in an unintended context. Let's examine an example to understand this risk:

// lib/data.ts

export async function getData() {
  const res = await fetch('https://external-service.com/data', {
    headers: {
      authorization: process.env.API_KEY,
    },
  });

  return res.json();
}

In the above code snippet, getData() appears to work on both the server and the client. However, the authorization header relies on the process.env.API_KEY, which is a private environment variable accessible only on the server. Next.js automatically replaces private environment variables with an empty string in client code to prevent the leakage of secure information. Consequently, although getData() can be imported and executed on the client, it won't function as intended. Making the variable public would resolve the issue but would compromise sensitive information.

Meet the "server-only" Package

To prevent the accidental usage of server-only code in client components, Next.js provides the "server-only" package. This package helps developers identify and restrict the usage of server-specific code, ensuring its execution exclusively on the server.

Installation

Install the "server-only" package using the following command:

npm install server-only

Implementation

Now importing the "server-only" package, any client component that attempts to import the server-only module will encounter a build-time error, clearly indicating that the module can only be used on the server.

Example:

// lib/data.ts

import 'server-only';

export async function getData() {
  // Code that should only run on the server
}

Bonus 🔥

Handling Client-Only Code

Next.js also offers the "client-only" package to handle modules containing client-only code, such as those relying on browser-specific APIs like the window object. Marking modules with "client-only" ensures they are only used on the client-side, preventing unintended access or execution on the server.

Installation

Install the "client-only" package using the following command:

npm install client-only

Implementation

By importing the "client-only" package, any server component that mistakenly imports the client-only module will generate a build-time error, notifying developers that the module can only be used on the client.

// lib/client-only-module.ts

import 'client-only';

// Client-only code utilizing browser-specific APIs

Like what you see? 💘

Feel free to follow me on Twitter, GitHub, and LinkedIn for more articles and insights on Next.js and other frontend development topics. Let's connect and stay updated on the latest trends and techniques in the world of web development!

- Twitter

- Github

- Linkedin

Component Patterns in Next.js 13

Niaz Morshed — Mon, 22 May 2023 16:24:11 +0000

When it comes to building robust web applications, performance optimization is a crucial consideration. Slow-loading websites can result in frustrated users and lost opportunities. Fortunately, Next.js, the popular React framework, offers a range of powerful features to tackle performance challenges head-on. In this article, we will dive into the latest patterns for Next.js 13, empowering you to design a highly efficient component tree and explore strategies for leveraging the strengths of client and server components. By the end, you'll be equipped with the knowledge and techniques to deliver blazing-fast web experiences.

Client Components at the Outermost Leaves

To boost the performance of your application, Next.js recommends moving your client component to the outermost leaves of your component tree whenever possible.

For instance, suppose you have a Layout component that consists of static elements like a logo and links, alongside an interactive search bar that relies on state. Instead of making the entire layout a Client Component, it's preferable to extract the interactive logic into its Client Component, such as the <SearchBar />. By doing so, the layout can remain as a Server Component, eliminating the need to send unnecessary component JavaScript to the client.

Here is a visual of how it's working:

Here is a code example of how Next.js recommends you extract your client component into the outermost branch.

// SearchBar is a Client Component
import SearchBar from './searchbar';
// Logo remains a Server Component
import Logo from './logo';

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <nav>
        <Logo />
        <SearchBar />
      </nav>
      <main>{children}</main>
    </>
  );
}

By applying this approach, you ensure that only the necessary components are rendered on the client side, leading to improved performance and reduced resource overhead.

Composing Client and Server Components

Server and Client Components can be combined in the same component tree.

Behind the scenes, React handles rendering as follows:

Phase1:

When the server kicks into action, React diligently renders all the Server Components, ensuring they're ready before being sent to the client. This rendering phase even covers Server Components nestled inside Client Components. During this server-side rendering, React wisely skips any Client Components it encounters, allowing them to shine later.

Phase2:

Now, enter the client-side realm. React takes the stage again, this time rendering the Client Components and seamlessly merging the work done on both the server and client sides. If a Client Component happens to house any Server Components, fear not. React ensures that the rendered content of those Server Components is placed precisely where it belongs within the Client Component.

Nesting Server Components within Client Components

When it comes to integrating Server Components within Client Components in Next.js, there are certain restrictions to consider. Directly importing a Server Component into a Client Component is not supported, as it would require an additional server round trip, impacting performance.

Unsupported Pattern: Importing a Server Component into a Client Component

The following code pattern is not supported:

'use client';

// This pattern will **not** work!
// You cannot import a Server Component into a Client Component.
import ExampleServerComponent from './example-server-component';

export default function ExampleClientComponent({
  children,
}: {
  children: React.ReactNode;
}) {
  // ...
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>

      <ExampleServerComponent />
    </>
  );
}

Recommended Pattern: Passing Server Components as Props to Client Components

Instead, Next.js recommends utilizing React props to create placeholders, or "holes," for Server Components within Client Components. This ensures optimal performance and decoupling of rendering.

The recommended pattern:

'use client';

// this pattern will work
import { useState } from 'react';

export default function ExampleClientComponent({
  children,
}: {
  children: React.ReactNode;
}) {
  // ...
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>

      {children}
    </>
  );
}

In this pattern, the ExampleClientComponent doesn't know the content of its children prop or that it will eventually be filled by the result of a Server Component. Its responsibility is solely to determine where the children should be placed.

The parent server component usage:

// This pattern works:
// You can pass a Server Component as a child or prop of a Client Component.
import ExampleClientComponent from './example-client-component';
import ExampleServerComponent from './example-server-component';

export default function Page() {
  return (
    <ExampleClientComponent>
      <ExampleServerComponent />
    </ExampleClientComponent>
  );
}

By following this recommended pattern, Next.js empowers developers to compose components efficiently, improving performance and maintaining the separation of concerns between server-side and client-side rendering.

Conclusion

In conclusion, Next.js provides powerful features and patterns to optimize performance in web applications. By strategically placing client components at the outermost leaves of the component tree, unnecessary JavaScript can be avoided, resulting in improved performance and reduced resource overhead. Additionally, Next.js allows for the seamless composition of client and server components, leveraging server-side rendering to ensure efficient rendering and merging of components on the client-side. When integrating server components within client components, it is important to follow the recommended pattern of using React props to pass server components as placeholders, enabling optimal performance and decoupling of rendering. By implementing these techniques and leveraging the strengths of Next.js, developers can deliver blazing-fast web experiences and enhance the overall performance of their applications.

Like what you see? 💘

- Twitter

- Github

- Linkedin

Choosing Between Server and Client Components in Next.js

Niaz Morshed — Mon, 22 May 2023 06:27:45 +0000

In Next.js, deciding whether to use Server Components or Client Components can have a significant impact on your application's performance and functionality. In this blog post, we will explore the use cases for each component type and guide when to choose Server Components or Client Components.

Understanding Server Components and Client Components

Server Components are the default choice in Next.js. They execute on the server, allowing you to fetch data, access backend resources directly, and keep sensitive information like access tokens and API keys secure.

On the other hand, Client Components are executed on the client-side, providing interactivity and leveraging browser-only APIs. They are useful for adding event listeners, managing state with hooks like useState() and useReducer().

Choosing Between Server and Client Components

To simplify the decision-making process, let's consider the different use cases for Server Components and Client Components:

Use case	Server Components	Client Components
Fetch data.	✅	❌
Access backend resources (directly)	✅	❌
Keep sensitive information on the server (access tokens, API keys, etc)	✅	❌
Keep large dependencies on the server / Reduce client-side JavaScript	✅	❌
Add interactivity and event listeners (`onClick()`, `onChange()`, etc)	❌	✅
Use State and Lifecycle Effects (`useState()`, `useReducer()`, `useEffect()`, etc)	❌	✅
Use browser-only APIs	❌	✅
Use custom hooks that depend on state, effects, or browser-only APIs	❌	✅
Use React Class Components	❌	✅

Note: The decision between Server Components and Client Components ultimately depends on the specific requirements of your application and the nature of the task at hand. Consider the strengths and limitations of each component type when making your architectural choices.

DEV Community: Niaz Morshed

How to protect your private routes in Next.js 13 & Appwrite?

Introduction

Understand Next.js and Appwrite

Setting up Next.js and Appwrite

Working with the services folder

Login and Signup

Protect private routes 🔒🔒

Learning resources

Questions?

Popwola | Your no-code popup builder | Appwrite x Hashnode Hackathon

Team Members

Description

The problem we aimed to solve

Introducing Popwola - The solution

Development Phases

Planning

Designing

Coding the App

Tech stack used

Features of appwrite used

Challenges I faced building it

Public Code Repository 🧑‍💻

Live App

A video recording showing the workflow

Appwrite #AppwriteHackathon

A comprehensive guide to Next.js 13 App Router - Part 1

Creating Routes

Layout

Dynamic Routes

Convention for Dynamic Segments

Generating Static Params

Catch-all Segments

Optional Catch-all Segments

Resources

Hey! You reached the bottom. Thanks for the read 😍

Ensure Code Separation in Next.js: Server Only vs Client Components

Understanding the Risk

Meet the "server-only" Package

Bonus 🔥

Handling Client-Only Code

Like what you see? 💘

Component Patterns in Next.js 13

Client Components at the Outermost Leaves

Composing Client and Server Components

Nesting Server Components within Client Components

Conclusion

Like what you see? 💘

Choosing Between Server and Client Components in Next.js

Understanding Server Components and Client Components

Choosing Between Server and Client Components