DEV Community: NathLowe

My Code Chronicles #3: Partial Pre-Rendering in Next.js - A Cart Page Example

NathLowe — Thu, 23 Jan 2025 08:45:34 +0000

In modern web development, ensuring fast load times and a seamless user experience is crucial. Partial pre-rendering, a powerful feature in Next.js, bridges the gap between Static Site Generation (SSG) and Server-Side Rendering (SSR) by selectively prerendering parts of a page while leaving others dynamic. In this article, we’ll dive into partial pre-rendering, using a Cart Page as an example. (This is kind of a complex example because it implicates 2 dynamic sections. If you guys want a simpler one, let me know.)

What Is Partial Pre-Rendering?

Partial pre-rendering allows us to optimize performance by prerendering static sections of a page while dynamically fetching and rendering frequently changing or user-specific data. It uses features like:

Static pre-rendering for predictable content (headers, footers, page layout).
Dynamic rendering for data fetched at runtime (e.g., user carts, recommendations).
Suspense boundaries to handle asynchronous loading elegantly.

Why Use Partial Pre-Rendering?

Improved Performance: By prerendering static parts, users interact with pages faster.
Better SEO: Static content is ready for search engine crawlers.
Enhanced User Experience: Dynamic components load seamlessly within placeholders or fallbacks.

The Cart Page Example

Overview

On our Cart Page, the static and dynamic parts are as follows:

Static: Page structure, layout components, and Fallbacks (Cart Content & Similar Products Placeholders).
Dynamic:
- Cart Content: Fetched directly in the server component before rendering.
- Similar Products Section: Fetched dynamically after the page has loaded using a suspense boundary.

Code Walkthrough

Below is the code for the Cart Page using partial pre-rendering.

1. Static Layout and Dynamic Cart Content

The main structure of the page is prerendered, while cart data is fetched on the server using an asynchronous function in a server component.

// imports...

export default async function CartPage() {
  // Fetch cart data on the server
  const { cart, areProductsInCart, productsIds } = await initiateCart();

  return (
    <main>
      <h1 className="sr-only">Cart Page</h1>
      <Section className="max-w-[1400px]">
        <CheckoutLayoutWrapper>
          <CheckoutLayoutContent>
            <SectionHeader
              tag={areProductsInCart ? `${cart.itemsCount} item(s)` : undefined}
              title="Cart Page"
              isCheckoutPage
            />
            <Card className="rounded-special w-full bg-primary-light shadow">
              <CardContent>
                {!areProductsInCart ? (
                  <EmptySection
                    title="Your cart is empty! Please add some products."
                  />
                ) : (
                  <>
                    {/* Desktop Cart Content */}
                    <CartContentDesktop cartProducts={cart.cartProducts} />

                    {/* Mobile Cart Content */}
                    <CartContentMobile cartProducts={cart.cartProducts} />
                  </>
                )}
              </CardContent>
            </Card>
          </CheckoutLayoutContent>

          {/* Sidebar for Cart Total and Coupon Code */}
          {areProductsInCart && (
            <CheckoutLayoutSidebar>
              {/* Coupon Code */}
              <CartCouponCode />

              {/* Cart Total */}
              <CartTotal cartData={cart?.allItemsWithData} />
            </CheckoutLayoutSidebar>
          )}
        </CheckoutLayoutWrapper>

        {/* Related Products Section */}
        <CartSimilarProducts productIdsToExclude={productsIds ?? []} />
      </Section>
    </main>
  );
}

2. Loading State

When cart data is being fetched, a loading.tsx component is displayed as a fallback. This is the default feature from NextJs App folder. This Loading component displays the placeholders of both the Cart Content And The Similar Products.

export default async function CartPage() {
  return (
    <main>
      <h1 className="sr-only">Cart Page</h1>
      <Section className="max-w-[1400px]">
        <CheckoutLayoutWrapper>
          <CheckoutLayoutContent>
            <SectionHeaderLoader isCheckoutPage />
            <Card className="rounded-special w-full bg-primary-light shadow">
              <CardContent>
                {/* Desktop */}
                <CartContentDesktopLoader />

                {/* Mobile */}
                <CartContentMobileLoader />
              </CardContent>
            </Card>
          </CheckoutLayoutContent>

          {/* Sidebar */}
          {/* Add Sidebar loader later maybe */}
        </CheckoutLayoutWrapper>

        {/* Related Products */}
        <CartSimilarProductsLoader />
      </Section>
    </main>
  );
}

3. Similar Products with Suspense

The Similar Products component fetches data dynamically and is wrapped in a suspense boundary. While data is being fetched, a placeholder (fallback) is shown.

export default function CartSimilarProducts({ productIdsToExclude }) {
  return (
    <Suspense fallback={<CartSimilarProductsLoader />}>
      {/* Actual similar products component */}
      <SimilarProducts productIdsToExclude={productIdsToExclude} />
    </Suspense>
  );
}

4. Flow Recap

Step 1: Cart Content data is being fetched. On the website, the fallback (placeholder for both the cart content and the similar products) are pre-rendered.
Step 2a: Cart Content data is fully fetched. On the website, all the pre-rendered content is replaced by the actual content.
Step 2b: Similar Products Content is being fetched. The content is the same as above. However, in the actual content, there is the Cart content and a pre-rendered placeholder for the cart similar products. Though it is the same content and display as in the previous fallback it is not the exact same component.
Step 3: Similar Products Content is fully fetched. On the website, we can now see both the Cart content and the Similar Products content.

Conclusion

Partial pre-rendering is a game-changer for building performant and dynamic applications. By leveraging Next.js's capabilities, we efficiently balance static and dynamic content on our Cart Page, enhancing both speed and user experience. If we are to be completely honest and literal, this is not Partial Pre-rendering, it is some kind of Nested Pre-Rendering. However, it does the trick if you are looking for Partial Pre-rendering. The Next.js team is actually working on developing a "real" Partial Pre-rendering feature, it is actually on "unstable" but might be operational in the next version.

My Code Chronicles #2: Creating a Dynamic Product Card Component in Next.js using Framer Motion

NathLowe — Sun, 19 Jan 2025 00:47:27 +0000

Hover effects are more than just eye candy—they are essential for creating an engaging user experience on modern websites. When implemented thoughtfully, hover effects can provide subtle visual feedback, improve usability, and guide user interaction intuitively.

For e-commerce websites, like the one I was building for Glamour & Gourmandise, the product card is a critical component. It needs to be visually appealing, informative, and highly interactive. To achieve this, I implemented a sophisticated hover effect that reveals additional product details in a sleek and seamless way.

Code

"use client";

import { motion } from "framer-motion" 
// Imports...


export default function ProductCard(){

  // State
  const [isHovered, setIsHovered] = useState(false);

  return (
    <article
      tabIndex={0}
      className={cn(
        "rounded-special group/product relative flex h-fit cursor-pointer flex-col overflow-hidden",
        "aspect-[4/5] border-2 border-dashed border-primary/20 sm:aspect-square md:aspect-[4/5]",
      )}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* Product Image */}
      <Image
       src={image}
       alt={alt}
       className={cn(
         "h-auto w-full flex-none object-cover",
         "h-[58%] flex-none sm:aspect-auto",
       )}
      />

      {/* Product Details */}
      <div
        className={cn(
          "group relative h-[42%] w-full grow",
          isHovered ? "is-hovered" : "",
        )}
      >
        <motion.div
          layout
          transition={{
            layout: { duration: 0.1 },
            // default: { ease: "linear" },
          }}
          className={cn(
            "rounded-special absolute bottom-0 left-0 flex min-h-[105%] w-full flex-col justify-between space-y-2 bg-white p-2 group-[.is-hovered]:h-auto sm:space-y-4 sm:p-3 lg:p-4",
            "",
          )}
        >
          <div className="flex-none">
            <h3 className="line-clamp-2 font-title font-semibold !leading-[1.1] min-[480px]:text-lg min-[545px]:text-2xl sm:mb-1">
              {product.title}
            </h3>
            <div className="mb-1 hidden h-0 items-center space-x-1 overflow-hidden group-[.is-hovered]:flex group-[.is-hovered]:h-auto sm:mb-3">
              {product.tags.map(
                ({ tag }, i) =>
                  i < 2 && (
                    <Badge variant="product-tag" key={i} className="">
                      {tag}
                    </Badge>
                  ),
              )}
            </div>
            <p className="line-clamp-3 hidden text-xs leading-[1.1] text-muted-foreground group-[.is-hovered]:line-clamp-3 md:text-sm">
              {product.description}
            </p>
            {product.link && (
              <Link
                onClick={(e) => e.stopPropagation()}
                replace
                href={product.link}
                className="block w-fit text-xs font-semibold text-primary transition hover:text-secondary group-[.is-hovered]:block sm:hidden"
              >
                More info
              </Link>
            )}
          </div>

          <div className="flex flex-wrap items-center justify-between gap-2">
            <div className="">
              <p className="font-title text-sm font-semibold leading-none min-[400px]:text-xl">
                {product.formattedPrice.priceWithCurrency}
              </p>
              <span className="hidden text-right text-[0.6rem] leading-none text-secondary min-[545px]:block sm:text-xs">
                {product.formattedPrice.priceUnit}
              </span>
            </div>

            {/* Add To Cart Button */}
            <Button size="sm" disabled={true}>
                  <span className="block size-4 animate-spin rounded-full border border-current border-t-transparent" />
                </Button>
          </div>
        </motion.div>
      </div>
    </article>
  );
}

Implementation

The Wrapper

The article element is the foundation of this hover effect. It is responsible for:

Maintaining the aspect ratio (responsively adjusted based on screen size).
Housing all child components, including the image and product details.
Triggering hover state changes.
Aspect Ratio: Ensures consistent sizing of the card across different devices.
Hover State: Sets isHovered to true or false to control the animation.

Product Details Section

The product details are housed in an absolutely positioned div at the bottom of the wrapper. This positioning ensures that the expanding animation occurs within the wrapper, avoiding disruptions to the page layout.
Framer Motion’s layout={true} is the key to this hover effect. It:

Animates Height Changes: When the product details expand, layout={true} calculates the difference in height and interpolates the transition smoothly.
Direction Control: Because the details div is positioned absolutely at the bottom, the expansion happens upward into the card instead of downward.
User-Friendly Transitions: Without layout={true}, the height change would feel abrupt and jarring.

Conclusion

This hover effect showcases how to elevate user experience with smooth animations and thoughtful design. While the actual website for Glamour & Gourmandise opted for a simpler zoom-in effect on images (as per the owner’s preference), this implementation demonstrates the versatility and creative possibilities with Framer Motion and Next.js.
If you’re interested in learning more about layout animations or have tips to optimize this implementation further, let me know!

My Code Chronicles #1: Optimizing Images in Next.js with a Custom Component

NathLowe — Fri, 17 Jan 2025 19:56:47 +0000

First Contentful Paint (FCP) is a critical performance metric that measures the time it takes for the first piece of content to appear on the screen after a user navigates to a page. A fast FCP is essential for providing a good user experience, as it gives users visual feedback that the page is loading.

However, using large, high-quality images can significantly delay the FCP, which impacts perceived performance. At the same time, high-quality images are vital for creating a visually appealing and professional website. Balancing fast load times and maintaining good image quality is often challenging.

To address this, I created a custom Next.js client component for images. This component initially renders a placeholder block when the page is built. After hydration, it uses JavaScript to load the image and only displays it once it has been fully loaded. Let’s dive into how it works.

Key Features

Initial Placeholder Rendering: During the page’s build and hydration phases, the component renders a placeholder (e.g., a skeleton or loader) instead of the actual image.
JavaScript Image Preloading: After hydration, the browser preloads the image using JavaScript. The image is only displayed once it has been fully loaded.
Responsive Sizing: The component supports responsive sizing via the setSizesprop, which allows developers to define image sizes for different screen breakpoints.
Loader Feedback: While the image is loading, a custom loader (e.g., a spinner or skeleton) is displayed to provide a better user experience.
Leverages Next.js Optimization: The component integrates seamlessly with Next.js’s <Image> for optimized image handling.

Code Overview

Here’s the complete implementation of the MyImagecomponent:

"use client";

import React, { ComponentProps, useEffect, useState } from "react";
import NextImage, { StaticImageData } from "next/image";

import ImageLoader from "./loader";
import { cn } from "@/lib/utils";

type NextImageProps = ComponentProps<typeof NextImage>;
type ImageProps = NextImageProps & {
  showLoaderIcon?: boolean;
  setSizes?: {
    default: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
  };
  src: string | StaticImageData;
};

const generateSize = (sizes: ImageProps["setSizes"]): string | undefined => {
  let size: undefined | string = undefined;
  if (sizes) {
    size = `${sizes.default}vw`;
    if (sizes.sm) size = `(min-width: 640px) ${sizes.sm}vw, ${size}`;
    if (sizes.md) size = `(min-width: 768px) ${sizes.md}vw, ${size}`;
    if (sizes.lg) size = `(min-width: 1024px) ${sizes.lg}vw, ${size}`;
    if (sizes.xl) size = `(min-width: 1280px) ${sizes.xl}vw, ${size}`;
  }

  return size;
};

export default function MyImage(props: ImageProps) {
  const { className, src } = props;

  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (document) {
      const image = new Image();
      image.onerror = () => {
        // Handle error if needed
      };
      image.src = typeof src === "string" ? src : src.src;
      image.onload = () => {
        setIsLoading(false);
      };
    }
  }, []);

  const newProps = {
    ...props,
    className: cn(className, "relative animation-fade-in"),
    fill:
      props.width !== undefined || props.height !== undefined ? false : true,
    sizes:
      props.width !== undefined || props.height !== undefined
        ? undefined
        : props.sizes ?? generateSize(props.setSizes),
  };

  if (isLoading)
    return (
      <ImageLoader
        showIcon={props.showLoaderIcon}
        className={`${className} relative overflow-hidden`}
      />
    );

  if (newProps.showLoaderIcon !== undefined) delete newProps.showLoaderIcon;
  if (newProps.setSizes !== undefined) delete newProps.setSizes;
  if (newProps.fill)
    return (
      <div className={`${className} relative overflow-hidden`}>
        <NextImage
          {...newProps}
          src={typeof src === "string" ? src : src.src}
          loading="lazy"
        />
      </div>
    );
  return (
    <NextImage
      {...newProps}
      src={typeof src === "string" ? src : src.src}
      loading="lazy"
    />
  );
}

How It Works

Initial Placeholder Rendering: When the component is mounted, a placeholder is shown using the ImageLoader component.

import React from "react";
import { FaImage } from "react-icons/fa";

// Types
interface ImageLoaderProps {
  className?: string;
  showIcon?: boolean;
}

export default function ImageLoader({ className, showIcon }: ImageLoaderProps) {
  className = className || "w-full h-full";
  showIcon = showIcon ?? true;
  return (
    <div
      className={`${className} flex flex-none animate-pulse items-center justify-center bg-primary/30`}
    >
      {showIcon && (
        <FaImage className="aspect-square h-auto w-6 max-w-[40%] text-primary/80 md:w-10 lg:w-14" />
      )}
    </div>
  );
}

Preloading and State Management: The useEffecthook uses a native Image object to preload the image in the background. The isLoading state determines whether the placeholder or the actual image is displayed.
Responsive Sizes: The generateSize function dynamically calculates the sizes attribute based on the screen’s viewport.
Final Image Rendering: Once preloading is complete, the image is displayed using Next.js’s <Image>, with all the necessary props and optimizations.

Conclusion

This custom image component provides a robust solution for optimizing image performance in Next.js. By displaying a placeholder initially and loading images only after hydration, it ensures a faster FCP without sacrificing quality.

However, there’s a small challenge I’m still working on: when the image appears after being loaded in the background, there’s a short delay. I suspect this delay is related to the rendering process of the image. If anyone has insights or solutions to address this, I would greatly appreciate your input.

Stay tuned for more posts in My Code Chronicles, where I share technical tips, challenges, and solutions from my development journey!

Next.js 13: Introduction to Client-Side Rendering and Client Components

NathLowe — Tue, 03 Oct 2023 03:08:48 +0000

Client-side englobes the processes that happen on the user’s device, usually in the user’s web browser. These processes are done after the website or web application has been sent to the user’s device, and they can involve tasks such as showing and rendering a web page, dealing with user interactions, or running JavaScript code.

Table of Content

I. How to use Client-Side in NextJS 13?
II. How are Client Components Rendered?
III. Benefits of Client Component
IV. Tips when working with Client Components
1. Moving Client Components Down the Tree
2. Avoid Importing Server Components into Client Components
V. Recap

How to use Client-Side in NextJS 13?

To enable client-side rendering (CSR) in NextJS 13, you need to use Client Components. You can create Client Components by adding the "use client" directive at the beginning of a file before your imports.

“use client” //at the top of the page

// YOUR CODE HERE

When you use "use client" in a file, all the other modules that you import into it, including child components, are part of the client bundle - and will be rendered by React on the client.

Good To Know:

You can define multiple "use client" entry points in your React Component tree. This allows you to split your application into multiple client bundles (or branches).
Components without the “use client” directive being used in a Client Component (with “use client”) are still considered to be Client Components.

How are Client Components Rendered?

Client Components are rendered in different ways in Next.js depending on whether the request is for a full page load (when you first visit your application or when you reload the page using the browser refresh) or for a subsequent navigation.

For full page load, to make the initial page load faster, Next.js will use React’s APIs to create a static HTML preview on the server for both Client and Server Components. This means, when the user first visits your application, they will see the content of the page right away, without having to wait for the client to download, parse, and run the Client Component JavaScript bundle. Then, on the client (navigator), the JavaScript instructions are used to hydrate Client Components and make their UI interactive.

For subsequent navigations, Client Components are rendered entirely on the client, without the server-rendered HTML.

Benefits of Client Component

Actually, for Client Components, we should talk more about use cases than benefits, as these “benefits” are already what we get with a simple React Application. We have:

Interactivity: Client Components can use state, effects, and event listeners.
Browser APIs: Client Components have access to browser APIs, like geolocation or localStorage, allowing you to build UI for specific use cases.

Tips when working with Client Components

1. Moving Client Components Down the Tree

To reduce the Client JavaScript bundle size, it is recommended to move Client Components down your component tree. I struggled to get it at first, but with an example it is easy to understand.

For example, you may have a <Navbar> Component that has static elements (e.g. logo, links, etc) and an interactive search bar that uses state.

Instead of making the whole <Navbar> a Client Component, move the interactive logic to a Client Component (e.g. <SearchBar/>) and keep your layout as a Server Component. This means you don't have to send all the component Javascript of the <Navbar> to the client, resulting in a faster page loading.

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

// Navbar is a Server Component by default
export default function Navbar({ children }: { children: React.ReactNode }) {
  return (
    <>
      <nav>
        <Logo />
        <SearchBar />
      </nav>
      <main>
        {children}
      </main>
    </>
  )
}

2. Avoid Importing Server Components into Client Components

You cannot use Server Components in Client Components. However, you can import components that do not have the “use client” directive into a Client Component, but it is not recommended. If that component does not use server components features (headers, async/await etc), it will work fine. But if you do not specify that it is a Client Component from the start, you could easily make the mistake of using Server Components features and therefore cause some errors.

If you really want to use a Server Component in a Client Component, the best way to achieve it is to wrap the Server Component with the client component (meaning pass the Server Component as a child of the Client one)

<ServerComponentMain/> Server Component

import ServerComponent from …
import ClientComponent from …

export default function ServerComponentMain() {
    return (
        <ClientComponent>
            <ServerComponent/>
        </ClientComponent>
    )
}

<ClientComponent> Client Component

“use client”

// import your modules here

export default function ClientComponent ({ children }: { children: React.ReactNode }){
    /* Client code, useState, useEffect… */
    return (
        <ClientComponent>
            {children}
        </ClientComponent>
    )
}

Recap

Client-Side Rendering is the process of rendering the web page on the user’s device using JavaScript.
Client components are a new feature in Next.js 13 that allows you to create components that sometimes run on the server but mostly on the client having access to browser APIs and hooks.
Some tips on how to use client components effectively are moving the client components down the tree, avoiding importing server components into client components.

In the next article, we will explore Server Side and Server Components in Next.js 13. Stay tuned!

Next.js 13: A Comprehensive Guide

NathLowe — Sun, 01 Oct 2023 04:24:29 +0000

Hello, I’m a frontend web developer specializing in React and Next.js. I’ve decided to share my knowledge and experience with the community through a series of articles focusing on coding tips and error decryption for React and Next.js. The purpose of this series is to help other developers navigate the complexities of these technologies, particularly the latest version of Next.js - Next.js 13.

In this first article, we’ll be diving into Next.js 13, exploring its differences with other tools, its advantages and disadvantages, and whether it’s a good fit for your projects. As a developer who has spent considerable time working with Next.js 13, I can attest to its greatness. It’s quite different from the previous versions and can be challenging to grasp initially, but the more you code with it, the better it gets. Yes, it has its fair share of bugs, but the Vercel team is consistently working on improvements. And I’m here to show you how to work around these bugs and errors.

What is Next.js 13?

Next.js 13.4 is a JavaScript framework built on top of React. It introduces several new features that make it dynamic without limits. Some of these features include:

• App Directory: This makes routing and layouts easier and faster.
• React Server Components: This makes server-first the default for dynamic applications.
• Streaming: This displays instant loading states and streams in units of UI as they are rendered.
• Turbopack (alpha): This is a Rust-based Webpack replacement that is up to 700x faster. For now, this is just to be used for development and is totally worth it. Give it a try! (you just need to run npm run dev --turbo)
• New next/image: This makes images load faster with native browser lazy loading.
• New @next/font: This allows for automatic self-hosted fonts with zero layout shift.
• Improved next/link: This simplifies API with automatic <a> tag.

Comparison with Other Tools

Next.js 13 stands out from other tools due to its wide range of features and flexibility. It’s perfect for creating both static and dynamic web pages, with the added benefit of merging the two using Incremental Static Regeneration (ISR).

When compared to Next.js 12, it introduces several new concepts such as pre-rendering (SSG vs SSR), server and client components, file differences, page & API routing, data fetching.

Gatsby is a free and open-source framework that excels in building static websites. However, it may not be as flexible as Next.js when it comes to rendering methods.

As for Remix, a newer framework that aims to bring back the simplicity of Web 1.0. It supports SSR with Edge deployment and couples routing with data loading. However, it may not be as mature as Next.js.

Pros and Cons of Next.js 13

Disregarding SEO, SSR, and other features that were already introduced in earlier versions, the 13th version of Next.js presents three primary advantages:

Better user experience: It provides a truly outstanding and customized user experience.
Above-average performance: It helps in creating performant web applications and superfast static websites.
Rapid feature development: It supports rapid feature development which is beneficial for both large companies like Netflix and Uber as well as smaller companies that are just starting.

On the other hand, Next.js 13 also has some disadvantages:

Bugs: As with any new technology, there are bugs that need to be addressed. However, the Vercel team is consistently working on improvements.
Learning curve: Due to its many new features and changes from previous versions, there can be a steep learning curve for developers new to Next.js or upgrading from an older version.

Recap: Is Next.js 13 a Good Fit?

In my opinion, despite some initial challenges and bugs, Next.js 13 is a great tool for web development. The more you work with it, the better it gets. Its wide range of features provides flexibility for developers while its performance enhancements offer a better user experience.

However, whether it’s a good fit for you would depend on your specific needs and circumstances. If you prioritize performance and rapid feature development, then Next.js 13 would be an excellent choice.

I hope you found this article helpful. Stay tuned for more articles in this series where I’ll be sharing specific coding tips for working with React and Next.js, including how to navigate around common bugs and errors. Happy coding! 😊

How to add internationalization to a Next JS 13 application (with React i18n)

NathLowe — Sun, 18 Jun 2023 04:19:23 +0000

Hey there, fellow developers! Today, we're going to embark on a journey to add internationalization to our Next.js 13 application.

Picture this: I was knee-deep in a project that needed internationalization, and like any sensible programmer, I turned to our trusty friend Google for help. Lo and behold, I stumbled upon an article that seemed like the perfect solution for my needs. Eagerly, I decided to give it a shot. However, I encountered a series of diverse errors along the way. Let me clarify, the method presented in that article was actually quite solid, but I felt it needed a bit of tweaking. We're not here to reinvent the wheel, though, so I'll save you the trouble of explaining the entire process. If you're curious, you can check out the method I personalized right here: https://locize.com/blog/next-13-app-dir-i18n/#step-4.

Why React intl for a NextJS project instead of Next intl ?

Instead of using Next Intl, I opted for React i18n. Why, you ask? Well, because in my humble opinion, React i18n is simply the bee's knees! They offer fantastic features like changing the page language via the URL, dividing translation files into namespaces, and, as of now, Next Intl is still in beta.

First Error

So, there I was, all excited to get started, and what do I encounter first? "Translation Not Found" error! Turns out, I had been running Next with TurboPack (also in beta at the time). After nearly an hour of fruitless debugging, I decided to give it a shot with a normal run dev command. Voila! Problem solved! Note to self: TurboPack may not recompile files for every refresh, causing translation issues. But hey, I'm sure the Vercel team will sort it out eventually.

Second Error

Now, brace yourself for the worst error of them all: the infamous React Hydration Error! This one really gave me a run for my money. You see, when using the client version of the useTranslation hook, we need a language value that remains the same on both the server and client sides, at least before hydration kicks in. Now, I had a deep component that I didn't want to burden with passing the language through its parent components. So, I thought, "Why not use a global store?" Cue Zustand, my trusty companion (you could use context or Redux too, by the way).

Initially, I set the language value to the default, let's say "en," and in the RootLayout, I passed the "lng" params to a client component to store it. But alas, here's where things got tricky. When the language switched from "en" during SSR to "fr" before hydration, a new value was created for the translation, causing the Hydration Error to rear its ugly head. But fear not, for I found a way out of this predicament.

Enter the useParams hook of Next.js 13! This magnificent hook retrieves the same params value on both the server and client sides. I utilized it in the component where I wanted to call the useTranslation hook. But let's be real, adding this to every client component needing translation would be quite the hassle. And what if I decide to change the method later? Nightmare material right there! So, I had a bright idea: I added the useParams hook to the useTranslation hook itself. Genius, right? Now, when I call useTranslation, it automatically invokes useParams, and guess what? No need to pass the language anymore! I also did away with all the code related to language selection.

i18n/client.ts

i18next
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(resourcesToBackend((language:string, namespace:string) => import(`../locales/${language}/${namespace}.json`)))
  .init({
    ...getOptions(),
    lng: undefined, // let detect the language on client side
    detection: {
      order: ['path', 'htmlTag', 'cookie', 'navigator'],
    }
  })

const runsOnServerSide = typeof window === 'undefined'

export function useTranslation(ns:string, options={}) {
  const lang = useParams()
  const ret = useTranslationOrg(ns, options)
  const { i18n } = ret
  if (runsOnServerSide && i18n.resolvedLanguage !== lang.lng) {
    i18n.changeLanguage(lang.lng)
  }
  return ret
}

Bug solved! Well, almost.

The Final Boss

Now, let's talk about that sneaky button I had to change the language on the page. It worked like a charm, thanks to the next/link component. The only issue? The pages would be prefetched with the current language, meaning the language wouldn't change for the new page we clicked. And to make matters worse, if we kept changing the language continuously, the client components' translation would get stuck in the previous page's language. Yikes!

But fret not, my fellow adventurers, for I have discovered the solution! I introduced a useEffect hook to keep an eye on any changes in the language params. Alongside that, I added a state to store the i18n instance with its trusty translation function (t). By implementing some clever logic, I ensured that when the language changes on the client side, the instance and its translation function change as well. And voila! The translation persists flawlessly in the client components. Crisis averted!

i18n/client.ts

...
export function useTranslation(ns:string, options={}) {
  const lang = useParams()
  const ret = useTranslationOrg(ns, options)
  const [translation, setTranslation] = useState(ret)
  const { i18n } = translation
  if (runsOnServerSide && i18n.resolvedLanguage !== lang.lng) {
    i18n.changeLanguage(lang.lng)
  }
  useEffect(()=>{
    if(!runsOnServerSide && i18n.resolvedLanguage !== lang.lng){
      i18n.changeLanguage(lang.lng)
    }
    setTranslation(state=>({...state,t:i18n.getFixedT(lang.lng, ns)}) )
  },[lang.lng])
  return translation
}

And just like that, we've come to the end of our thrilling internationalization escapade. I hope you enjoyed our little journey and found some useful tips along the way. Thank you for sticking around till the very end. Until next time, happy coding and may your bugs be few and your jokes be plenty! Cheers!

Building a Social Media Website - Part 2: Ideas and Set up.

NathLowe — Thu, 18 May 2023 17:58:39 +0000

_Bonjour _and welcome to the second article of our series on building a social media website using NextJS 13, Zustand, Tailwind CSS, Apollo Client, and React i18n. In this article, we'll discuss how we found inspiration for the design of our social media website and go through the setup process to kickstart our project.

I- Finding Ideas for the Design

To start, we wanted a foundation for our social media website. We discovered a free GraphQL API that provides users, posts, comments, albums, and photos. This API is the only one that accepts both Queries and Mutations.

Then we need to find a matching template for these elements. While exploring various free ones on the internet, we found them to be lacking the specificity we desired. Eventually, we decided to take inspiration from the design of Instagram and made modifications to tailor it to our needs. We began by sketching out the different pages and dividing them into components. Some components would be reused across multiple pages, layouts, as we will see a crucial concept for NextJS 13.

II- Setting up the Application

To begin our coding journey, we'll need a reliable code editor. In this case, we'll use Visual Studio Code (VS Code) due to its popularity and extensive features.

Next, let's dive into the setup process for our project. First, we need to initialize NextJS 13. Open your terminal or command prompt and run the following command:

npx create-next-app@latest

This command will set up a new NextJS 13 project for us along with Tailwind CSS directly.

Next, we need to incorporate Zustand for state management, Apollo Client for GraphQL integration, and React i18n for internationalization. Install the necessary packages by running the following commands:

npm install zustand apollo-client react-i18next

Now that we have our project set up, it's important to establish version control. Create a new repository on GitHub and initialize it with the relevant Git commands:

git init
git add .
git commit -m "Initial commit"
git remote add origin [repository-url]
git push -u origin master

Lastly, to set the right mood for coding, it's always helpful to have an inspiring playlist🎶. Find your favorite coding playlist or discover a new one that keeps you focused and motivated.

Now that our foundation is in place, we are ready to move on to the next article, where we will explore creating routes using NextJS 13.

If you liked this article, please consider leave a like and a comment, we will really appreciate it. Stay tuned for the upcoming article and happy coding!

---NathLowe

How to Learn a New Language or Framework: Tips and Strategies

NathLowe — Mon, 15 May 2023 21:24:32 +0000

Learning a new programming language or framework can be daunting, but it is also an essential skill for any developer. In this series of articles, we will be exploring the process of building a fully responsive social media website using NextJS 13, Zustand, Tailwind CSS, Apollo client, and React i18n. But before we dive into the specifics of these frameworks, let's first discuss some general tips and strategies for learning a new language or framework.

I- Master the Fundamentals / Essential Skills

1. Understand the Basics of Programming:
Before you can effectively learn a new language or framework, you need to have a good understanding of the basics of programming. This includes concepts such as variables, functions, control structures, and data structures. If you're new to programming, consider taking an introductory course or reading a beginner's guide to programming. Personally, as a self-taught, I watched a bunch of training videos on YouTube, and the best channel for me was The Net Ninja.

One must give to Caesar what is Caesar's

2. Set Clear Goals
When learning a new language or framework, it's important to set clear goals for what you want to achieve. Do you want to build a small project to test out your skills, or do you want to become proficient enough to land a job as a developer? Having clear goals will help you stay motivated and focused on your learning journey. As a freelancer, I usually study new frameworks to improve my curriculum in order to apply for more jobs on Upwork and add more gigs on Fiverr.

3. Learn by Doing
One of the most effective ways to learn a new language or framework is to simply start building things. Choose a small project that you're interested in and use it as an opportunity to practice your new skills. As you work on your project, you'll encounter problems and challenges that will force you to learn new concepts and techniques. This is exactly why I decided to code a social media website, and also because I heard you can't be an accomplished developer without having code this type of website 😅.

4. Use Multiple Resources
There are many resources available for learning programming languages and frameworks, including books, online courses, documentation, and forums. Don't limit yourself to just one resource - try to use multiple sources to get a well-rounded understanding of the language or framework you're learning. Personnaly, my first step is to find a free tutorial on YouTube to have a grasp on the framework, and then I read its whole documentation. The first step make the second extremelly lighter.

5. Practice, Practice, Practice
Learning a new language or framework takes time and practice. Make sure you're consistently working on projects and practicing your skills. This will help you build your confidence and proficiency over time. It is only practicing over and over that will help the different syntaxes and patterns to get stuck in your brain.

The most important in studying a new framework or language is to understant why and how to use it, especially for frameworks. The syntaxes, patterns, and functions come after, simply because they will be always available on the documentation to copy. Let me explain what I mean.

II- Introducing the Frameworks

Now that we've covered some general tips for learning a new language or framework, let's briefly introduce the specific frameworks we'll be using in this series. Most of these are based on React which is a free and open-source front-end JavaScript library for building single page user interfaces based on components.

1. NextJS 13

NextJS is a React-based framework for building static-side generated (SSG) and server-side rendered (SSR) web applications. SSG means the code React is converted into an html page with specific style and script files associated once the application is built and can't be changed no more. SSR means the code React is converted into an html page directly on the server everytime the page is requested to this server. And there is more, the 13th version of NextJS add a third type which is Incremental Static Regeneration (ISR). Basically, this make it possible to do an SSG as many times as we decide.

You may wonder: "Why not just do an SSR instead of ISR ?" or "What is the specific difference between SSR and SSG anyway ?". Well, these are legit questions and their understanding is what make the difference between the programmers. However, this is not the purpose of this article, if you want more on NextJS 13, let me know in the comment section.

So, this is what I meant at the end of the first section. Specifically for this framework, it is essential to know the difference between SSR, SSG, and ISR, between dynamic and static routes, server and client components... How to create those won't be a problem, the only one will be how to use them properly.

2. Zustand
Zustand is a state management library for React. It allows you to easily manage complex state logic using simple, intuitive hooks. It is easier to use than redux but does it do the job as efficiently as redux does ? We'll find out.

3. Tailwind CSS
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for common styling needs. It allows you to quickly and easily style your application without writing custom CSS. It is easier than Bootstrap to manage and modify. Also, as we don't want to create every single component by ourself, we will use Flowbite components that are based on Tailwind.

We are not lazy just smart 😁

5. Apollo Client
Apollo Client is a framework that helps to manage GraphQL queries and mutations. Read the documentation but mainly the only things we will need is querying datas (GET) and mutating datas (POST, DELETE, UPDATE)

4. React i18n
React i18n is a library for internationalizing React applications. It provides a simple API for translating your application's text into multiple languages.

Learning a new language or framework can be challenging, but it is also a rewarding experience that can lead to new career opportunities and personal growth. By following the tips and strategies outlined in this article, you'll be well on your way to mastering your next programming language or framework. In the next article in this series, we'll dive deeper into the specifics of building a social media website using NextJS 13, Zustand, Tailwind CSS, Apollo Client and React i18n.

Please, if you liked it don't forget to like and subscribe for the other articles of this series. Thank you so much 👨‍💻!