CODEWITHSUNDEEP
deploymentvercelnext.js13
user18685664
user18685664

Reputation:

Next JS 13 data send from client component to server side component but show Not found

JS 13 and inside my ReadMoreButton client component i push my article data using useRouter hook of NEXT. Not i can not use useRouter hook inside NEXT.JS server component so here i fetch searchParams and fetch that data. here problem is before rendering i am checking if searchParams are defined or not not if i check in development everything work fine it render data but in production mode it show page not found error even if data is correctly send. when i run next build it give me following output Output and i am running side in production mode using next start and it show page not found when i do /article?serchParamsData.

You can check my whole code here : https://github.com/ssiwach8888/Next.JS-News-App i also deploy production build on Vercel but it also show same error.

I am using NEXT.JS 13 with typescript

# ReadMoreButton.tsx "First Control goes here."
"use client";

type Props = {
  article: NewsData;
};

import { useRouter } from "next/navigation";
//For navigate to SSC

const ReadMoreButton = ({ article }: Props) => {
  const router = useRouter();

  const handleClick = () => {
    const queryString = Object.entries(article)
      .map(([key, value]) => `${key}=${value}`)
      .join("&");
    const url = `/article?${queryString}`;
    router.push(url);
  };

  return (
    <button
      className="bg-orange-400 h-10 rounded-b-lg dark:text-gray-900 hover:bg-orange-500"
      onClick={handleClick}
    >
      Read More
    </button>
  );
};

export default ReadMoreButton;


# Article.tsx "Then we navigate to this page."

type Props = {
  searchParams?: NewsData;
};

import { notFound } from "next/navigation";
import LiveTimestamp from "../Components/LiveTimestamp";
import Link from "next/link";

const ArticlePage = ({ searchParams }: Props) => {
  if (
    (searchParams && Object.entries(searchParams).length === 0) ||
    !searchParams
  ) {
    return notFound();
  }

  const article: NewsData = searchParams;

  return (
    <article className="mt-6">
      <section className="flex flex-col lg:flex-row pb-24 px-0 lg:px-10">
        <img
          src={article.image === "null" ? "/no-image.jpeg" : article.image}
          alt={article.title}
          className="h-50 max-w-md mx-auto md:max-w-lg lg:max-w-xl object-contain rounded-lg shadow-md"
        />

        <div className="px-8">
          <Link legacyBehavior href={article.url || ""}>
            <a target="_blank">
              <h1 className="headerTitle hover:underline cursor-pointer px-0 pb-2">
                {article.title}
              </h1>
            </a>
          </Link>

          <div className="flex divide-x-2 space-x-4">
            <h2 className="font-bold">
              By: {article.author !== "null" ? article.author : "Unknown"}
            </h2>
            <h2 className="font-bold pl-4">Source: {article.source}</h2>
            <p className="pl-4">
              <LiveTimestamp
                time={
                  article.published_at === "null" ? "" : article.published_at
                }
              />
            </p>
          </div>

          <p className="pt-4 text-lg">{article.description}</p>
        </div>
      </section>
    </article>
  );
};

export default ArticlePage;

Upvotes: 0

Views: 1889

Answers (1)

crushwan
crushwan

Reputation: 1

You just need to put the article page in [bracket] to make it dynamic so next js can fetch all pages otherwise it would display blank---- change article folder to [article] more reference https://nextjs.org/docs/routing/dynamic-routes

Upvotes: 0

Related Questions