, formerly a Typekit, offers a wide range of high-quality fonts that can give your 

Unlike the Google Fonts, which can be self-hosted via next/font/google, Adobe Fonts requires a slightly different approach. Let's see what that is…

This blog will cover below important points,

What is  best way to integrate Adobe Fonts in Next.js ?

How to use local hosting for better performance Optimizing Adobe Fonts for better Core Web Vitals ?

Before you begin, you’ll need an Adobe account. If you don’t have one yet, just sign up on Adobe Fonts.

Browse through the font library and pick the ones you love and perfect for your website. There's a huge selection, so you're sure to find something perfect for your site.

Once you've found a font you want to use, click on it and then hit Add to Web Project.

When you add a font to your project, Adobe will ask you to create a Web Project.

Just give your project a name (something like “My Awesome Website Fonts” or something you like), and pick the font styles you want (like bold or italic). This helps you only load the ones you need, making your site faster.

Once your project is ready, Adobe will generate a special embed code for you.

Please Copy the code — it’s a simple <link> tag that you’ll use in your website’s HTML.

Paste the embed code into the <head> section of your page, like this:

This links your website to the fonts you just picked.

Now that the fonts are connected to your website, it’s time to apply them! In your CSS file, you can use the font like this:

body {
    font-family: "Your Chosen Font", sans-serif;
}

Save your changes, refresh your website, and voilà! Your new fonts should be live on your site.

Lets see how this magic works on next.js as well.

Method 1: Using <link> in _document.js which is Recommended for SEO & Performance.

Since Next.js optimizes font loading, adding Adobe Fonts to _document.js ensures styles are applied efficiently.

=> Open pages/_document.js and add the Adobe Fonts link inside <Head>

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

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="https://use.typekit.net/your-project-id.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

This method loads fonts early and ensures no layout shift (CLS). and Fonts will be cached, improving performance.

Method 2: Adding Adobe Fonts in _app.js or a Global CSS File

Alternatively, you can import the Adobe Fonts CSS in _app.js or your global styles file.

import "../styles/globals.css"; 

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Then, add the Adobe Fonts import inside globals.css:

@import url("https://use.typekit.net/your-project-id.css");

body {
  font-family: "your-font-name", sans-serif;
}

Option B: Load Fonts Dynamically in a Component

If you want to load fonts only when a specific component is used, you can do:

import { useEffect } from "react";

export default function MyComponent() {
  useEffect(() => {
    const link = document.createElement("link");
    link.href = "https://use.typekit.net/your-project-id.css";
    link.rel = "stylesheet";
    document.head.appendChild(link);
  }, []);

  return <p style={{ fontFamily: "your-font-name" }}>Hello, Adobe Fonts!</p>;
}

Use this method if you need fonts in specific pages only.

Once the fonts are loaded, you can use them in CSS files or styled-components.

h1 {
  font-family: "your-font-name", serif;
}

For Styled Components (If Using Emotion or Styled-Components):

import styled from "styled-components";

const Title = styled.h1`
  font-family: "your-font-name", serif;
`;

export default function Home() {
  return <Title>Hello with Adobe Fonts!</Title>;
}

Optimizing Adobe Fonts for Performance & SEO

To ensure fast loading and good Core Web Vitals, follow these tips:

 If a font is used in the hero section, preload it by adding this inside _document.js:

Too many fonts increase load time. Try to use only necessary weights & styles.

 by default, which can cause FOIT (Flash of Invisible Text). To fix this, use:

@font-face {
  font-family: "your-font-name";
  src: url("https://use.typekit.net/your-project-id.css");
  font-display: swap;
}

Alternative: Self-Hosting Adobe Fonts in Next.js

If you want even faster performance, you can self-host Adobe Fonts instead of loading them from Adobe's CDN.

Download the Font Files from Adobe Fonts (if allowed).

@font-face {
  font-family: "CustomAdobeFont";
  src: url("/fonts/custom-adobe-font.woff2") format("woff2"),
       url("/fonts/custom-adobe-font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "CustomAdobeFont", sans-serif;
}

Self-hosting improves performance because fonts are loaded from your own server.

How to add Adobe Fonts in Next.js ?

Embarking on the journey of web development means navigating through various rendering techniques like CSR (Client-Side Rendering) and SSR (Server-Side Rendering). These methods play a pivotal role in determining the appearance, functionality, and speed of web applications, directly impacting user experiences.

Let's delve into the comparison between CSR and SSR, exploring their rendering mechanisms, performance implications, SEO considerations, suitability for different app types, and key factors developers should keep in mind.

Through this exploration, you'll gain a deeper understanding of CSR vs SSR, empowering you to make informed decisions that enhance user satisfaction, search engine visibility, and overall performance of your web projects.

Client-side rendering involves the dynamic rendering of web content directly within the user's browser environment, offering real-time interactive experiences without solely relying on constant server requests.When you visit a client-side CSR website, you’ll see the first HTML file that comes from the server with very little content and references to the JavaScript files. Your browser will then download these scripts and run them to dynamically render the page.

Here are some of the benefits of this approach:

 CSR enables highly interactive elements such as animations, live updates, and dynamic information without requiring full page reloads.

 Once the basic JavaScript files are loaded, navigating the site can be extremely fast because content is fetched dynamically.

 Distributing rendering work to user devices reduces server load and allows for more efficient scaling.

 Robust tools for developing intricate CSR applications are provided by contemporary frameworks and libraries.

 Content that significantly relies on JavaScript rendering may be difficult for search engine crawlers to index.

 Due to the browser's requirement to download and run JavaScript code before rendering, the initial visit to the website may take longer.

 User experiences may differ depending on how various browsers read JavaScript code.

 One of the accessibility issues related to CSR is that full accessibility may be more difficult to achieve, especially for people with disabilities.

In simple terms, Single Sign-on (SSR) means that the web server generates the complete HTML for a Web page on the Web server and then sends that HTML directly to the web browser of the client. When the client loads a Web page, it gets a fully-rendered HTML document from the start. Here are a few advantages of SSR:

 Since the server manages rendering, it can aid in safeguarding private information and thwarting specific kinds of intrusions.

 SSR ensures a consistent experience for all users by functioning properly on a variety of devices and browsers.

SSR is still able to deliver a minimally functional website to users whose device has limited capabilities for JavaScript.

 Caching entire pages on the server can enhance performance for users who visit again.

 As traffic grows, managing rendering on the server may become a bottleneck, requiring additional server resources.

 Frequent requests from the server may cause real-time updates and interactions to lag.

 Compared to CSR, implementing SSR frequently requires more intricate setup and maintenance.

 More data may need to be sent from the server to the client in order for the page to load initially.

FAQ's

In summary, CSR prioritizes rich content and interactivity but may have issues with SEO and load times. Conversely, SSR improves SEO and speeds up load times, but it may also reduce interactivity and strain server resources. Depending on the kind of application, SEO requirements, performance goals, and server resources, one should choose between CSR and SSR.

Client-Side Rendering (CSR) Vs Server-Side Rendering (SSR)

Conforms high-quality code before every commit.

In this blog, We’ll guide you through setting up ESLint, Prettier, and Husky in a Next.js project to take your developer workflow to the next level.

Eslint is a static code analysis tool that checks your JavaScript/TypeScript code for errors and applies coding standards. Think of it as a spell-checker for your code.

Prettier is the opinionated code formatter that automatically formats your code to make it consistent and readable.it supports so many languages.

Husky is a tool that adds Git hooks to your project, so you can run scripts like linting and formatting before making a commit or pushing code into your respective github.

 prevents messy or broken code from being committed.

By combining them, you’ll save time, avoid unnecessary bugs, and make life easier for your project team.

If you don’t already have a Next.js project, let's create one,

npx create-next-app@latest my-next-app
cd my-next-app

Next.js comes with ESLint support out of the box, but we’ll install Prettier and configure both.

Run the following command to install ESLint, Prettier, and some helpful plugins:

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

Turns off ESLint rules that might conflict with Prettier.

 Runs Prettier as an ESLint rule, so you see formatting issues directly in your editor.

Edit your ESLint configuration file (.eslintrc.json) like this:

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  tabWidth: 2,
  printWidth: 80,
};

To format your code with Prettier, add a script to your package.json:

"scripts": {
  "format": "prettier --write ."
}

Your code should now be linted and formatted!

Now let’s set up Husky to enforce these checks before commits.

Husky allows you to run scripts before commits. Let’s add a pre-commit hook to run ESLint and Prettier.

npx husky add .husky/pre-commit "npm run lint && npm run format"

This command will add a pre-commit file to your 

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint
npm run format

Now, every time you commit code, Husky will run linting and formatting checks automatically.

If there are any linting or formatting issues, the commit will be blocked until you fix them.

After completing the setup, your project directory should look like this:

my-next-app/
├── .eslintrc.json
├── prettier.config.js
├── .husky/
│   └── pre-commit
├── package.json
├── node_modules/
├── pages/
├── public/
├── styles/
└── ...

: Everyone on your team writes code in the same style.

 Husky enforces good practices automatically.

 No more manual code formatting or debugging inconsistent styles.

If you’re building a Next.js project, you already know how important clean, consistent, and error-free code is. This is where tools like ESLint, Prettier, and Husky come into picture.

How to Set Up ESLint, Prettier, and Husky in Next.js ?

Server-Side Rendering (SSR) and Client-Side Rendering (CSR): 

Next.js supports both Server-Side Rendering and Client-Side Rendering. This flexibility allows developers to choose the rendering method based on the specific needs of each page or component.

A page can be server-rendered on demand or statically produced during build time thanks to Next.js's support for hybrid rendering.

Using file-based routing, Next.js offers a simple solution for implementing dynamic routing. By adding files to the "pages" directory, you can build pages; the route will be determined automatically.

It's easy to develop API routes with Next.js, which simplifies building frontend and backend components for a single project.

Incremental Static Generation was introduced with Next.js, which makes it possible to update static content without having to rebuild the entire website.

Next.js is built on top of React, so if you're familiar with React, it's relatively easy to get started with Next.js.

Because Next.js supports middleware, you can alter how requests and responses are handled.

Although Next.js is a strong and adaptable framework, it has its limitations just like any other technology. The following are some Next.js restrictions:

The learning curve may be higher for novices, particularly if they are not familiar with React or web development in general. It can take some time to understand ideas like static site generation, client-side rendering, and server-side rendering.

Large projects or websites with a lot of pages may require a big increase in build time. Development speed may be impacted by this, particularly during testing and iterations.

The complexity of Rendering on the Server Side: 

It can occasionally be difficult to implement server-side rendering, particularly when asynchronous processes and data fetching are involved. The ratio of client-side rendering to server-side rendering must be carefully managed by developers.

Difficulties with Serverless Deployment: 

Although server-less deployments are supported by Next.js, there are situations when configuring server-less features and guaranteeing peak performance can be difficult.

Restricted Flexibility in Static Site Generation: 

Even though Next.js allows for static site generation (SSG), it might not be as adaptable as some other static site generators, such as Gatsby.js, particularly in instances involving intricate data collecting.

File-Based Routing May Have Limitations: 

Although Next.js's file-based routing mechanism is useful for many applications, more complicated routing requirements may require workarounds and extra setups.

The Next.js projects you work on may occasionally require upgrades due to changes in the ecosystem or dependencies, as the technology landscape moves quickly.

Server-side rendering adds overhead to the server and may result in higher server load in situations where there are many concurrent requests.

Using React and GraphQL, Gatsby.js is a static site generator (SSG) that creates optimized, quick websites. Its pre-build method, which produces static HTML files, allows it to excel in building highly performant static websites. GraphQL is used by Gatsby to facilitate data fetching, which enables developers to extract data from several sources and structure it as needed. In addition, Gatsby boasts a strong ecosystem of plugins, which facilitates seamless integration with various services and capability extensions. For blogs, portfolios, and websites that focus mostly on content, it works very well.

The main function of Gatsby.js is to generate static sites; that is, it pre-builds pages during compilation to produce static content that loads quickly.

 Before developing your website, you can import data from multiple sources and format it to your liking using Gatsby's GraphQL query and retrieval capabilities.

A diverse range of plugins, including those for image editing and SEO optimization, are readily incorporated into Gatsby's vast ecosystem.

Right out of the box, Gatsby is performance-optimized. It creates a service worker for offline support, optimizes photos automatically, and lazy-loads materials.

The method used by Gatsby is sometimes called a "content mesh," since it enables you to gather information from several CMS (Content Management Systems) and other data sources.

Gatsby is built on React, just like Next.js, giving React developers a comfortable and familiar development environment.

Despite being a well-liked and strong static site generator, Gatsby.js has certain drawbacks. The following are some of Gatsby.js's drawbacks:

Just like with Next.js, huge projects or websites with a lot of pages may take a while to construct. The build process may take longer as the project gets bigger.

GraphQL is a major component of Gatsby, and developers who are unfamiliar with it may find it to be somewhat of a learning curve. For novices, comprehending the structure and optimization of queries might be difficult.

Complex Configuration for Advanced Use Cases: 

Even if Gatsby works well for a lot of use cases right out of the box, sophisticated adjustments could be needed for more complex scenarios or certain criteria. It may be difficult for developers unfamiliar with the Gatsby environment because of this.

Since Gatsby is mostly intended for static site construction, retrieving data in real time can be difficult. Although real-time data integration is possible, it may not be as simple as with server-side rendering frameworks.

Although Gatsby's plugin ecosystem is one of its strong points, relying too much on them can occasionally cause problems, particularly if they are poorly maintained or have conflicting requirements.

Managing a complex GraphQL schema can become difficult as the project expands. Careful planning is needed to ensure that the schema effectively represents the necessary data and is simple to maintain.

Although dynamic routes can be created with Gatsby, they are not as flexible or dynamic as they are with frameworks like Next.js. Gatsby is built for the creation of static sites.

In a serverless environment, deploying Gatsby sites could call for extra setups and considerations. Even though Gatsby's serverless deployment support has improved, there may still be some issues in particular situations.

You must have freedom while deciding between SSR and CSR.

A framework that facilitates both front-end and back-end development is what you need.

Both dynamic routes and API routes are part of your project.

A prerequisite is incremental static generation.

Creating high-performing static websites is your main priority.

When importing data from many sources using GraphQL, you like to use a data-centric approach.

For a range of functionality, you want to leverage the vast ecosystem of plugins.

Next.js is a React framework that allows you to use CSR, SSR, and SSG in your React applications. It simplifies the process of creating React applications by providing a systematic

and flexible way to create web pages. Next.js supports several features such as static

 It offers a balance between speed and flexibility and is often used to create both small and large

Next.js vs Gatsby.js key-difference, Advantages-Disadvantages, Limitations

But before we dive into the installation process, let's cover quickly why 

 14 provides a strong base for server-side rendering, static site generation, and client-side React applications. Then there is the power of the UI component library called Shadcn. 

Similarly, you will be able to create a high performance and beautiful UI-based application, and at the same time, enable scalability.

Before you begin, be sure you have the following.

 installed in your system, preferably the latest version.

Step 1: Setting Up a New Next.js 14 Project

First, we are going to create a new Next.js 14 project. Open your terminal and run this command:

npx create-next-app@latest my-shadcn-app
cd my-shadcn-app

This command will scaffold a new Next.js project for you. After the setup is complete, navigate into your project directory and start the development server:

You should now be seeing your new Next.js app running locally at http://localhost:3000. You have just created a brand-new Next.js 14 project.

Now that you have Next.js 14 up and running, it's time to install Shadcn. You can do this quite easily by using npm or yarn. Run the following in the root of your project:

There you go! Shadcn is installed in your project; however, this isn't the end. Envision integrating it with your Next.js App.

Step 3: Integrating Shadcn with Next.js 14

First, to use Shadcn, you need to import its elements and into the Next.js pages. Modify pages/index.js to add a Shadcn button:

import { Button } from 'shadcn';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to My Shadcn App</h1>
      <Button>Click Me</Button>
    </div>
  );
}

Save the file, flip over to the browser, and refresh that page. Voilà! A brand new, shiny button from Shadcn!

Shadcn components are designed to be easily modified, so you can make your application exactly the way you want it to be. Now let's make a few adjustments to the button we've just added using Tailwind CSS:

<Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">

Custom Styled Button

</Button>

You have only taken a few classes, yet this bland default button is now a nicely styled component for any design.

Step 5: Deploying Your Next.js 14 Project

Once you have a Next.js 14 app satisfied and Shadcn integration, it's time to deploy! Next.js makes that pretty easy. Even more so with Vercel. Here's how to do it:


Just follow the on-screen instructions, and in just a few moments, your app will be live on the web!

Fastness means using the best and most up-to-date tools and frameworks in the ever-fast-developing web development world at your fingers.

 14 stands as a robust and go-to powerhouse for building React apps—every developer's MUST-HAVE in their kit. But what if you could supercharge your Next.js project with a sleek, modern UI library like 

How to Install Shadcn with Next.js 14: A Step-by-Step Guide

You must install Node.js before you can install Next.js. Verify that npm and Node.js are installed on your computer. If not, get 

 from the official website and install it.

Verify that Node is up to date on your machine. Run the below command in your terminal to verify, then compare the result with the most recent LTS version found at

Once you install Node.js, the npm command will appear in your command line.

Now that you have Node updated to the latest version and npm, create an empty folder anywhere you want, for example in your home folder, and go to:

There are two methods available for installing next.js 

. Next.js’s official website recommends using automatic installation, which sets up everything automatically for you.

For automatic installation, launch your terminal and execute the subsequent command,

If you'd rather use “yarn”, use Next.js to make a new application.

Now, Navigate to the Project Directory by executing below mentioned command,

Use the below command to launch the development server:

Your next.js app is successfully running on 

To install manually, open a terminal window and type the following command,

npm install next@latest react@latest react-dom@latest

These scripts refer to the many phases involved in creating an application:

For advanced setups, features, and best practices, check out the official Next.js documentation at Next.js.

 It runs “next dev” To launch Next.js in development mode.

More latest Post