What’s New in Next.js 15? New Form Component for Enhanced Search Bar Experience

1. Introduction to Next.js 15

As the tech world evolves, Next.js continues to adapt and set new standards for the development landscape. Next.js 15 introduces enhancements to its ecosystem, pushing forward performance and flexibility for frontend and full-stack developers. This latest release ensures improved SSR (Server-Side Rendering) capabilities, an enhanced routing system, and an innovative approach to handling forms. This aligns perfectly with modern needs in web applications where responsive user experience and effortless data handling are paramount.

2. Highlight Features in Next.js 15 :

1. Request APIs for Async (Breaking Change) :
2. The server waits for a request before rendering any content in conventional server-side rendering. Waiting for the request to render them is not necessary, though, because not all components rely on request-specific data. The server should try to get as much ready as it can before a request comes in. We must choose when to wait for the request in order to enable this and prepare the way for upcoming optimizations.
3. Caching Semantics :
4. Caching Semantics The Next.js App Router came with settings for opinionated caching. With the opportunity to opt out when necessary, these were made to offer the best performing option by default.
   We reassessed our caching heuristics in light of your input, taking into account how they might work with fetch-based third-party libraries and projects like Partial Prerendering (PPR).
5. React compiler (test version):
6. The React team at Meta developed a new experimental compiler called the React Compiler. The compiler is able to apply automated optimisations to your code because it has a thorough understanding of the Rules of React and plain JavaScript semantics. Through APIs like useMemo and useCallback, the compiler lessens the amount of manual memoization that developers must perform, simplifying, maintaining, and reducing the likelihood of errors in code.
FORM Component:
The new component extends the HTML <form> element, which adds client-side navigation, prefetching, and progressive enhancement.
For forms that take users to a new page, like a search form that takes them to a results page, it is helpful.

3. The All-New Form Component for Search Bars:

One of the most exciting updates in Next.js 15 is the Form Component, particularly useful for creating highly interactive, search-focused elements in your application. This component simplifies form management, reduces boilerplate code, and improves UI/UX with enhanced data handling. With the Form Component, developers gain a more intuitive structure for capturing user input, which is essential for creating efficient and dynamic search bars.

5. How to Implement the Form Component in Next.js 15 :

To take full advantage of the new Form Component in Next.js 15, here’s a simple implementation guide for adding a search bar to your application:

1-upgrade Next.js 15: Ensure you’re using the latest version of Next.js by running:

npm i next@canary react@rc react-dom@rc eslint-config-next@rc

 2-Create Search bar component search.jsx

import React from "react";
import Form from "next/form";

const Search= () => {
  return (
    <Form
      action={`/search`}
      className={`relative inline-flex w-full h-12 mt-4 xl:right-6 lg:relative lg:left-0 rounded-lg`}
    >
      <input
        type="text"
        name="query"
        required
        aria-labelledby="search-input"
        className={`h-8 w-full rounded-lg border border-gray-800 dark:placeholder-light xs:placeholder-dark  sm:placeholder-light dark:border-light border-b-mainColor sm:border sm:border-b-mainColor bg-transparent text-dark placeholder-dark dark:border-b-light border-transparent text-sm lg:border lg:border-transparent lg:bg-transparent lg:border-b-slate-50  dark:text-light py-4 pl-2 lg:text-medium  outline-none focus:rounded-md focus:border-2 focus:border-mainColor`}
        placeholder="Search for Articles..."
      />
          <button
      className={`absolute inset-y-0 right-0 flex items-center px-4 text-gray-700 bg-gray-100 border border-gray-300 rounded-r-md hover:bg-gray-200 focus:outline-none focus:ring-mainColor focus:border-mainColor`}
      type="submit"
    >
      Search
      <svg
        className="h-5 w-5 ml-4"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M14.795 13.408l5.204 5.204a1 1 0 01-1.414 1.414l-5.204-5.204a7.5 7.5 0 111.414-1.414zM8.5 14A5.5 5.5 0 103 8.5 5.506 5.506 0 008.5 14z"
        />
      </svg>
    </button>
    </Form>
  );
};

export default Search;

3-Define the Form Component in Your home Page

import React from "react";
import Card from "./Card";
import data from "./data.json";
import Search from "./Search";

const BlogSection = async () => {
  return (
    <div className="bg-gray-100 md:px-10 px-4 py-12 font-[sans-serif]">
      <div className="max-w-5xl max-lg:max-w-3xl max-sm:max-w-sm mx-auto">
        <div className="flex justify-around items-center mb-8">
          <h2 className="text-3xl font-extrabold text-gray-800">
            Latest Blog Posts
          </h2>
        // this is search bar  <Search />
        </div>
        <div className="flex flex-grow-1 max-sm:gap-8">
          {data.map((post) => {
            return <Card key={post.id} post={post} />;
          })}
        </div>
      </div>
    </div>
  );
};

export default BlogSection;

4-create search folder in create page.jsx

import React from "react";
import data from "../components/data.json";
import Card from "../components/Card";
// function for filter data
export const searchFunction = async (query) => {
  const resultSearch = data.filter((post) => {
    const regex = new RegExp(`${query}`, "gi");
    return post.title.match(regex);
  });
  return resultSearch;
};

const page = async ({ searchParams }) => {
  const { query } = await searchParams;
  const result = await searchFunction(query);
  console.log(result);
  return (
    <div className="py-24 px-16">
      <h1 className="mb-10 text-3xl">
        Result for keyword :{" "}
        <span className="text-3xl  text-blue-500">{query}</span>
      </h1>
      {result?.map((post) => {
        return <Card post={post} key={post.id} />;
      })}
    </div>
  );
};

export default page;

5-create in component Card.jsx

import React from "react";
import Link from "next/link";
import Image from "next/image";

const Card = ({ post }) => {
  return (
    <div className="bg-white rounded overflow-hidden w-96 ml-3">
      <Image
        src={post.image}
        alt="Blog Post 1"
        className="w-full h-52 object-cover"
        width={400}
        height={300}
        loading="lazy"
        quality={80}
      />
      <div className="p-6">
        <h3 className="text-lg font-bold text-gray-800 mb-3">{post.title}</h3>
        <p className="text-gray-500 text-sm">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore...
        </p>
        <p className="text-orange-500 text-[13px] font-semibold mt-4">
          08 April 2024
        </p>
        <Link
          href={`/blogs/${post.id}`}
          className="mt-4 inline-block px-4 py-2 rounded tracking-wider bg-orange-500 hover:bg-orange-600 text-white text-[13px]"
        >
          Read More
        </Link>
      </div>
    </div>
  );
};

6- use searchButton with status handle for client-side

create SearchButton.jsx in component folder

"use client";
import { useFormStatus } from "react-dom";

export default function ButtonSearch() {
  const status = useFormStatus();
  return (
  <button
      className={`absolute inset-y-0 right-0 flex items-center px-4 text-gray-700 bg-gray-100 border border-gray-300 rounded-r-md hover:bg-gray-200 focus:outline-none focus:ring-mainColor focus:border-mainColor`}
      type="submit"
    >
      {status.pending ? "searching..." : "search"}
      <svg
        className="h-5 w-5 ml-4"
        fill="currentColor"
        viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M14.795 13.408l5.204 5.204a1 1 0 01-1.414 1.414l-5.204-5.204a7.5 7.5 0 111.414-1.414zM8.5 14A5.5 5.5 0 103 8.5 5.506 5.506 0 008.5 14z"
        />
      </svg>
    </button>
  );
}

6. Conclusion:

The introduction of Next.js 15 marks a major step forward for developers and organizations seeking to create high-performance web applications. The new Form Component transforms the way we approach search bar implementation, allowing for smoother user interactions, real-time search capabilities, and simplified state management. These improvements, coupled with Next.js 15’s advancements in SSR, caching, and routing, create an environment where developers can build applications that are not only fast but also SEO-optimized and user-friendly.