Diving into Next.js - My 2-Week Learning Experience

For my internship, I am working on a deployed product with hundreds of users. I was familiar with React but not with Next.js. I was given a two-week learning phase to familiarize myself with Next.js and get started.
Firstly, Next.js is a framework built on top of React by Vercel. It is used in many production-level projects.

The reason: file-based routing, SEO support, multiple CSS features, instant UI retrieval from the server, creation of API endpoints within the project itself, and loads of other features.
You can read about this in detail here - link.

To learn Next.js quickly and just get a grasp of the significant features, I made use of the official documentation tutorial.

Here are some key useful points from the tutorial:

➡️ Next.js is highly compatible with Tailwind CSS and will install modules automatically if chosen. Alternatively, one can also create CSS modules, the major benefit of doing either is the ability to evade style collisions and apply styles to components easily.

➡️ Next.js optimizes font retrieval, it hosts font files to reduce the number of requests made while rendering custom fonts for a website.
The cooler part, however, is image optimization. Those who have worked with HTML will be familiar with the problem of optimizing an image for different screens, be it the dimension or layout, and the next/image does this automatically.

➡️ Personally, while working on my tasks, the thing that made code tracing so easy was the file-system routing. The URL is mapped to route segments. Each route has a page.tsx or page.jsx which exports the visible components. There is additionally another standard file called layout.tsx for components shared between multiple pages (navigation bars, etc.), so re-rendering for every page is avoided. The <a> tag in HTML initiates a complete refresh on link routing, whereas the next/link prefetches code for the linked routes, thereby making link navigation almost instantaneous.

➡️ The next part deals with understanding APIs and DB connectivity. Next.js uses React Server Components, so there is no need to maintain API layers while dealing with the backend for small applications, as databases can be queried directly. Larger applications, including the one that I worked on, need an explicit modular API layer for scalability and security.
As an example, if the requirement was to fetch the number of transactions made in a case, using JS would mean fetching data and using an array method to compute the count, but using an SQL query directly is much easier.

➡️ Most websites, including the one I worked on, require data to be dynamically rendered. Data fetching can be slow at times. Loading.tsx is a special file that can contain UI to be shown while the data is being fetched.
You might have observed loading skeletons, this is to improve the user experience while waiting for data retrieval.
Streaming the entire page may not be needed in all cases, the slow fetching might be due to a few components. React's Suspense allows certain parts of the page to be loaded after the main UI is displayed. Suspense boundaries can be created based on the requirement.

constructing a skeleton with tailwind utility classes

export function TableRowSkeleton() {
  return (
    <tr className="w-full border-b border-gray-100 last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg">
      {/* Customer Name and Image */}
      <td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3">
        <div className="flex items-center gap-3">
          <div className="h-8 w-8 rounded-full bg-gray-100"></div>
          <div className="h-6 w-24 rounded bg-gray-100"></div>
        </div>
      </td>
      {/* Add more <td> skeleton cells here based on your table structure */}
    </tr>
  );
}

➡️ Next.js has client hooks like useSearchParams() and usePathname(), which help in accessing parts of the URL. The useSearchParams() hook enables us to get parameters from the client without hitting the server.

➡️ The next interesting part is the graceful error handling. JS uses try-catch blocks for error handling. The file will contain an error object along with a reset client-based function to re-render the route.
Form validation can be done on the client side using simple constraints such as required.

client component with error and reset

'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

Server-side validation, however, is needed to ensure the right data is entering the database and no malicious attempts occur on the client’s side.
Authentication and authorization: NextAuth.js abstracts and simplifies much of the process involved in verifying the identity of someone initiating a login.

---

Thanks for reading 😊
Please feel free to share your thoughts and insights.