Next.js Discord

Discord Forum

NextJS Data not showing on next page

Unanswered
Giant Chinchilla posted this in #help-forum
Open in Discord
Giant ChinchillaOP
Github:
https://github.com/psans20/record-boxing

When I click fighter name the data does not render

74 Replies

Giant ChinchillaOP
// pages/fighter/[slug].js
import { useRouter } from "next/router";
import fighters from "../../data/record.json";
import Image from "next/image";

export default function FighterDetails() {
  const router = useRouter();
  const { slug } = router.query;

  if (!slug) return <p>Loading...</p>;

  const fighter = fighters.find(
    (f) => f.Name.toLowerCase().replace(/\s+/g, "") === slug
  );

  if (!fighter) return <p>Fighter not found</p>;

  return (
    <div className="container mx-auto px-4 sm:px-6 lg:px-8 mt-8">
      <h1 className="text-4xl font-bold">{fighter.Name}</h1>
      <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Image
          src={fighter.Image}
          alt={fighter.Name}
          width={300}
          height={300}
          className="rounded shadow"
        />
        <div>
          <h2 className="text-2xl font-semibold">Boxing Profile</h2>
          <ul className="mt-4 space-y-2">
            <li>
              <strong>Division:</strong> {fighter.Weight}
            </li>
            <li>
              <strong>Region:</strong> {fighter.Region}
            </li>
            <li>
              <strong>Rank:</strong> {fighter.Rank}
            </li>
            <li>
              <strong>Wins:</strong> {fighter.Wins}
            </li>
            <li>
              <strong>Losses:</strong> {fighter.Losses}
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}
It not working
Giant ChinchillaOP
@Southern Martin sorry to ping you could you please help me I think it a NextJS 15 issue
I am just trying to render record.json onto next page that all
the data
Giant ChinchillaOP
I hosted website to showcase: https://wbc-rankings.netlify.app/
@Giant Chinchilla I hosted website to showcase: https://wbc-rankings.netlify.app/
James4u
I think your folder structure is incorrect
why do you have fighters inside pages?
move fighters outside of pagesdirectory and have it right inside app
and you know app router has different file based routing system
@Giant Chinchilla take some time to learn changes in app router
Giant ChinchillaOP
I moved the fighter folder to app and it still does not work
@Giant Chinchilla I moved the fighter folder to app and it still does not work
James4u
did you check the app router documents a bit?
no more [slug].js
Giant ChinchillaOP
Yeah I am reading through it btw I am using NextJS 15 version
oh
James4u
make [slug] directory and make a page.tsx inside it
Giant ChinchillaOP
my current structure
@Giant Chinchilla my current structure
James4u
you don't need dynamic route???
Giant ChinchillaOP
Sorry I dont understand it
James4u
previously you had [slug].js
for different pages like
fighter/slug-1
fighter/slug-2
@Giant Chinchilla my current structure
James4u
your current one is just about /fighter
Giant ChinchillaOP
I haven't done project in many months I am not sure how to get around this
James4u
well it's a different thing
@Giant Chinchilla I haven't done project in many months I am not sure how to get around this
James4u
I don't think you know what you are gonna build
you have a list of items in the first page
and when you click on one of them
it should head to /fighter/slug-of-the-item
Giant ChinchillaOP
Yeah I forgot how to use routing I want it to render the json data onto the fighter page
@Giant Chinchilla Yeah I forgot how to use routing I want it to render the json data onto the fighter page
James4u
yet it has nothing with json data - you just don't know about dynamic routing
check out this link and switch the page/app router option in the top left
what you had originally [slug].js is page router solution
and as you are now using app router, you should follow my directions - [slug] directory and page.tsx inside it
Giant ChinchillaOP
Thank you I try that now, should I use page.jsx instead of tsx since I am not using TypeScript
@Giant Chinchilla Yeah I forgot how to use routing I want it to render the json data onto the fighter page
James4u
it's not a single page - in other words it's not /fighter but /figher/slug
Giant ChinchillaOP
I think like this
James4u
no no
create a folder called "fighter"
and move your [slug] folder inside it
see your route format
@Giant Chinchilla I think like this
James4u
also get your data directory outside of the app folder
and please take some time to read the docs before you struggle
also remove the pages, why do you have pages inside app?
Giant ChinchillaOP
Sorry I am confused
@James4u also remove the `pages`, why do you have `pages` inside app?
Giant ChinchillaOP
removed
James4u
and get your data folder outside of the app folder
and adjust your imports accordingly
Giant ChinchillaOP
[slug]/page.js:
// pages/fighter/[slug].js
"use client";
import { useRouter } from "next/router";
import fighters from "../../data/record.json";
import Image from "next/image";

export default function FighterDetails() {
  const router = useRouter();
  const { slug } = router.query;

  if (!slug) return <p>Loading...</p>;

  const fighter = fighters.find(
    (f) => f.Name.toLowerCase().replace(/\s+/g, "") === slug
  );

  if (!fighter) return <p>Fighter not found</p>;

  return (
    <div className="container mx-auto px-4 sm:px-6 lg:px-8 mt-8">
      <h1 className="text-4xl font-bold">{fighter.Name}</h1>
      <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Image
          src={fighter.Image}
          alt={fighter.Name}
          width={300}
          height={300}
          className="rounded shadow"
        />
        <div>
          <h2 className="text-2xl font-semibold">Boxing Profile</h2>
          <ul className="mt-4 space-y-2">
            <li>
              <strong>Division:</strong> {fighter.Weight}
            </li>
            <li>
              <strong>Region:</strong> {fighter.Region}
            </li>
            <li>
              <strong>Rank:</strong> {fighter.Rank}
            </li>
            <li>
              <strong>Wins:</strong> {fighter.Wins}
            </li>
            <li>
              <strong>Losses:</strong> {fighter.Losses}
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}
see how you can get slug in your server component
also @Giant Chinchilla https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#example
you have to use different hook in app router
again plz check all changes in app router when you use it @Giant Chinchilla
Giant ChinchillaOP
I have a lot to catch up on
James4u
but again, the correct approach is to use a server component and get slug from your page directly (not using client side hook)
Giant ChinchillaOP
I have changed file structure and everything but I cant figure out this issue
James4u
you have to use different hook in app router
I already told you
also recommended you to use https://nextjs-forum.com/post/1311696061869330532#message-1311725027829350451 to get slug not using hooks
Giant ChinchillaOP
I finally did it thank you
I have to relearn all this again
James4u
yeah, but if you have enough context about next.js page router it won't be that difficult
@Giant Chinchilla I have to relearn all this again
James4u
just mark solution to close the thread!
🙂