TTC
Theo's Typesafe Cult•9mo ago
Kenzo

Next not doing SSG routes?? Am I missing something?

Hi, I need to do this page ssg instead of dynamic server rendered, i dont have any dependencies so i have no idea whats happening, gemini or chatgpt has no clue either.
9 Replies
Kenzo
KenzoOP•9mo ago
"use client"
import Image from 'next/image'


export default function ListOfDeviantss() {
  type Deviant = {
    name: string;
    location: string;
    does: string;
    likes: string;
    description: string;
    imgName: string;
    position?: {
      text: string;
      coords: [number, number];
    };
  };
  const deviants: Deviant[] = [
    {
      name: "Butterfly's Emissary",
      location: "Tutorial",
      does: "Combat: Attack",
      likes: "Green Light, Flowers",
      description:
        "A glowing magenta paper buttefly that can fight alongside you. Use it to mark the enemies' weakspots and increase Weakspot DMG.",
      imgName: "butterfly",
    },
  ];

  return (
    <div className="h-full w-full max-w-[1000px] flex-col text-center">
      {/* <div className="flex w-full justify-around bg-cyan-800/25 py-2 text-lg font-semibold tracking-tight">TEST1</div> */}
      <h1 className=" font-extrabold tracking-widest  text-white">
        Once Human <span className="text-cyan-600">Deviants</span> List
      </h1>
      <p className="mb-8 text-white/70">
        Up to date excel by @DaRansal:{" "}
        <a
          href="https://docs.google.com/spreadsheets/d/1MBm8xUK4HPhmjSG54MKP5YBqtezaXbPSAxGpYcPBZRo"
          target="_blank"
          className="font-bold text-cyan-600/80"
        >
          Link
        </a>
      </p>
"use client"
import Image from 'next/image'


export default function ListOfDeviantss() {
  type Deviant = {
    name: string;
    location: string;
    does: string;
    likes: string;
    description: string;
    imgName: string;
    position?: {
      text: string;
      coords: [number, number];
    };
  };
  const deviants: Deviant[] = [
    {
      name: "Butterfly's Emissary",
      location: "Tutorial",
      does: "Combat: Attack",
      likes: "Green Light, Flowers",
      description:
        "A glowing magenta paper buttefly that can fight alongside you. Use it to mark the enemies' weakspots and increase Weakspot DMG.",
      imgName: "butterfly",
    },
  ];

  return (
    <div className="h-full w-full max-w-[1000px] flex-col text-center">
      {/* <div className="flex w-full justify-around bg-cyan-800/25 py-2 text-lg font-semibold tracking-tight">TEST1</div> */}
      <h1 className=" font-extrabold tracking-widest  text-white">
        Once Human <span className="text-cyan-600">Deviants</span> List
      </h1>
      <p className="mb-8 text-white/70">
        Up to date excel by @DaRansal:{" "}
        <a
          href="https://docs.google.com/spreadsheets/d/1MBm8xUK4HPhmjSG54MKP5YBqtezaXbPSAxGpYcPBZRo"
          target="_blank"
          className="font-bold text-cyan-600/80"
        >
          Link
        </a>
      </p>
<section
        className="mx-auto mb-28 mt-2 grid gap-8"
        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }}
      >
        {deviants.map((deviant, index) => (
          <div
            key={index}
            className="flex w-full  flex-col overflow-hidden rounded-xl border border-zinc-800  bg-[#070809]/50 p-2 pb-3"
          >
            <div className="ml-1 flex w-full items-center  justify-between align-middle">
              <div className=" tracking-tight">
                <div className="text-bold text-left text-xl tracking-tighter text-[#6fa6aa]">
                  {deviant.name}
                </div>
                <div className="text-left text-base text-white/70">
                  {deviant.does}
                </div>
              </div>
              <Image
                className="h-24 w-24 rounded-full p-2"
                src={`/deviants/${deviant.imgName}.webp`}
                alt='deviant image'
                width={24}
                height={24}
              />
            </div>
            <div className="mb-4 flex w-full justify-center text-center text-xs tracking-tighter text-white/70">
              {deviant.description}
            </div>
            <div className="flex w-full justify-between px-1 text-left text-base tracking-tighter  text-[#6fa6aa]">
              <div>
                Likes:
                <span className="ml-1 text-base  text-white/70">
                  {deviant.likes}
                </span>
              </div>
            </div>
            <div className="flex w-full justify-between px-1 text-left text-base tracking-tighter  text-[#6fa6aa]">
              <div>
                Where :
                <span className="ml-1 text-base text-white/70">
                  {deviant.location}
                </span>
              </div>
            </div>
          </div>
        ))}
      </section>
    </div>
  );
}
<section
        className="mx-auto mb-28 mt-2 grid gap-8"
        style={{ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }}
      >
        {deviants.map((deviant, index) => (
          <div
            key={index}
            className="flex w-full  flex-col overflow-hidden rounded-xl border border-zinc-800  bg-[#070809]/50 p-2 pb-3"
          >
            <div className="ml-1 flex w-full items-center  justify-between align-middle">
              <div className=" tracking-tight">
                <div className="text-bold text-left text-xl tracking-tighter text-[#6fa6aa]">
                  {deviant.name}
                </div>
                <div className="text-left text-base text-white/70">
                  {deviant.does}
                </div>
              </div>
              <Image
                className="h-24 w-24 rounded-full p-2"
                src={`/deviants/${deviant.imgName}.webp`}
                alt='deviant image'
                width={24}
                height={24}
              />
            </div>
            <div className="mb-4 flex w-full justify-center text-center text-xs tracking-tighter text-white/70">
              {deviant.description}
            </div>
            <div className="flex w-full justify-between px-1 text-left text-base tracking-tighter  text-[#6fa6aa]">
              <div>
                Likes:
                <span className="ml-1 text-base  text-white/70">
                  {deviant.likes}
                </span>
              </div>
            </div>
            <div className="flex w-full justify-between px-1 text-left text-base tracking-tighter  text-[#6fa6aa]">
              <div>
                Where :
                <span className="ml-1 text-base text-white/70">
                  {deviant.location}
                </span>
              </div>
            </div>
          </div>
        ))}
      </section>
    </div>
  );
}
noblica
noblica•9mo ago
I'm assuming you're using App Router? I don't think you need the "use client" at the top here. This seems like it should be statically generated. Do you maybe have a repo we could use to debug this locally?
Kenzo
KenzoOP•9mo ago
hey no, I can't share the repo i removed the use client still says dynamically generated, not static
noblica
noblica•9mo ago
Ok, can you reproduce the issue in a separate repo that you can share? Just looking at the code you posted, I don't see a reason why it shouldn't be statically generated, so would need to dig deeper.
Kenzo
KenzoOP•9mo ago
Kenzo
KenzoOP•9mo ago
Route (app)                              Size     First Load JS
┌ λ /                                    7.71 kB         133 kB
├ λ /_not-found                          881 B          85.2 kB
├ λ /api/trpc/[trpc]                     0 B                0 B
├ λ /api/webhooks                        0 B                0 B
└ λ /deviants                            137 B          84.5 kB
+ First Load JS shared by all            84.3 kB
  ├ chunks/817ad8d0-534585802fb54d98.js  53.4 kB
  ├ chunks/89-9f4d9311e1af8081.js        29 kB
  └ other shared chunks (total)          1.96 kB


ƒ Middleware                             119 kB
Route (app)                              Size     First Load JS
┌ λ /                                    7.71 kB         133 kB
├ λ /_not-found                          881 B          85.2 kB
├ λ /api/trpc/[trpc]                     0 B                0 B
├ λ /api/webhooks                        0 B                0 B
└ λ /deviants                            137 B          84.5 kB
+ First Load JS shared by all            84.3 kB
  ├ chunks/817ad8d0-534585802fb54d98.js  53.4 kB
  ├ chunks/89-9f4d9311e1af8081.js        29 kB
  └ other shared chunks (total)          1.96 kB


ƒ Middleware                             119 kB
` In this config, i wanted everything public route Im using a t3 stack + clerk -- nah, I reverted the middleware to the old one, "/" being public, changed the main app / thing to this: 
export default  function Page() {
  return (
    <div className="h-full w-full max-w-[1000px] flex-col text-center">
      <h1 className=" font-extrabold tracking-widest  text-white">TEST TEST</h1>
    </div>
  );
}
export default  function Page() {
  return (
    <div className="h-full w-full max-w-[1000px] flex-col text-center">
      <h1 className=" font-extrabold tracking-widest  text-white">TEST TEST</h1>
    </div>
  );
}
and still λ / dynamic ----- All routes are dynamic in the repo, I don't know what I've changed, I only took t3 app and added clerk https://github.com/AndreuSCK/t3nextbug ---
Kenzo
KenzoOP•9mo ago
No description
Kenzo
KenzoOP•9mo ago
Its a "feature" of clerk, not a bug 🙄 So we should just wrap the components that need auth
noblica
noblica•9mo ago
Hey sorry, life got in the way, so I didn't get a chance to respond sooner. But yeah, that tracks. I recently had to implement a custom auth solution, by adding some custom validation code to middleware.ts, and noticed that Next doesn't build routes that are behind auth. So I don't think it's strictly related to Clerk, more to Next itself.
Want results from more Discord servers?
Add your server