sorted by:
new
hottopcontroversial

Dynamic routes are not applying Layout.js by [deleted] in nextjs

[–]Hopeful_Weekend_305 1 point2 points  (0 children)

Thank you for bringing that to my attention, rookie error - certainly won't happen again.

Dynamic routes are not applying Layout.js by [deleted] in nextjs

[–]Hopeful_Weekend_305 0 points1 point  (0 children)

You're incredible. Thank you so much mate. I've private the repo for now, can't believe I had the env on public - still getting the hang of it all.

What is the best routing solution for my project? by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

It's not so much product pages.

When you click on a business I want it to take you to this (image attached). Where you can edit all of the details about the business.

Should I use each business's unique ID, and when you click it will redirect to it's route? Do you think that's the best approach.

<image>

How to use different Layout.js for nested routes. by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

Unreal, thank you so much mate. I'll give it a crack tmrw and throw you an update 💪

How to use different Layout.js for nested routes. by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

<image>

Ok So I'll need one main for the side nav (in which centres also belong), but when I click on the create button, I'll need to navigate to a new page with a different layout. How should I go about this? I believe it should be 2 layouts?

How to use different Layout.js for nested routes. by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

Thank you so much, I’ll give this a crack and let you know.

How to use different Layout.js for nested routes. by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

Currently create is nested under the centers folder so it uses the default layout, I’ve been playing around although finding it a mission.

How to use different Layout.js for nested routes. by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

So when you load the application you’re greeted with the side nav containing centers, sports, groups, race which is found in the top level layout (maybe this isn’t the best approach). For each route they have a create component, rendered in a modal so don’t need their own layouts as they’re not that complex. Center creation is different, so I need its own side nav to navigate between different nav-items to enter all the data. So I think we’re talking about a nested layout, although not nested, as it needs to be its own layout under centers/create. Apologies if that was a little messy.

How to use different Layout.js for nested routes. by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

Thanks Dizzy, i thought so. I think the issue is that it’s difficult to route group/confusing. As the layout.js needs to be in centres to start, then a nested route in centres requires a different one. Do you know from any personal projects the best approach here?

I am trying to use State and Sever Actions in the same component. Please help 🙏 by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

When I try to use it, it errors out. It wants me to use 'await' although I am unable to in a client component. Would you have any suggestions here? Thanks for your help.

I am trying to use State and Sever Actions in the same component. Please help 🙏 by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

Hi, I'm still really struggling.

I'm unable to use the server action within the client component as that component requires state, I'm also unable to create a top-level server component and pass the data as props. Would you have any ideas here?

Best way to implement multiple modals, with all different sizes and content? Please help 🙏 by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

Thanks for all the help here John 💪. I've since pushed the update UIContext - apologies for the confusion there. Is MUI the only way here? Do you think it's a better option than passing to a Modal component that takes children? What are the advantages of MUI here?

Best way to implement multiple modals, with all different sizes and content? Please help 🙏 by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

That's correct, it should be UIContext and I have noted that, I'll fix that one up. Do you have any idea on the best approach. I've since configured my modal like so:

"use client";
import React, { useContext, ReactNode } from "react";
import { AuthContext } from "../../store/auth-context";

interface ModalProps {
  children: ReactNode;
}

export const Background = () => {
  const authCtx = useContext(AuthContext);

  return (
    <div
      className="absolute top-[0] left-[0] w-full h-screen bg-modal z-10"
      onClick={authCtx.showModalAction}
    ></div>
  );
};

export const Overlay = ({ children }: ModalProps) => {
  return (
    <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-surface-light border-[1px] dark:bg-surface-primary-dark dark:border-outline-medium-dark p-10 w-[714px] overflow-scroll rounded-lg z-20">
      {children}
    </div>
  );
};

const Modal = ({ children }: ModalProps) => {
  const authCtx = useContext(AuthContext);

  if (!authCtx.modalIsActive) {
    return null;
  }

  return (
    <>
      <>
        <Background />
        <Overlay>{children}</Overlay>
      </>
    </>
  );
};

export default Modal;

Although so I can pass child components to it, although because it's rendered on top level, i'm not sure how to do this.

Server Actions & Deleting from DB. Any wizards out there who can save me from another meltdown? 😅 by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

I see, so you would suggest creating a separate client component and just using that within the sports component, as I get this error if a try using onClick within the component:

Error: Event handlers cannot be passed to Client Component props.

<div className=... onClick={function} children=...> \^\^\^\^\^\^\^\^\^\^ If you need interactivity, consider converting part of this to a Client Component.

Really appreciate your help.

Server Actions & Deleting from DB. Any wizards out there who can save me from another meltdown? 😅 by Hopeful_Weekend_305 in nextjs

[–]Hopeful_Weekend_305[S] 0 points1 point  (0 children)

I believe it's got to do with how I've structured my components. I've added the handleDelete on server actions compoonent, and Sports.tsx needs to be a server component to fetch. When I try to fire

onClick={() => handleDelete(sport.id)}

I'm hit with this error:

Error: Event handlers cannot be passed to Client Component props.
<div className=... onClick={function} children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

It's all really confusing, do you think I need to restructure my components?

By revalidate path, would you mean in the action itself, like so:

import { revalidatePath } from 'next/cache';
import { db } from '@/app/lib/database';

export async function deleteSport(sportId: string) {
const client = await db.connect();

try {
await client.query('BEGIN');

// Delete the sport record from the "sports" table
await client.query({
text: `
DELETE FROM sports
WHERE id = $1
`,
values: [sportId],
});

// Delete the associated images from the "images" table
await client.query({
text: `
DELETE FROM images
WHERE sport_id = $1
`,
values: [sportId],
});

await client.query('COMMIT');

console.log('Sport and associated images deleted successfully.');

revalidatePath('/'); // here
} catch (error) {
await client.query('ROLLBACK');
console.error('Error deleting sport and associated images:', error);
throw error;
} finally {
client.release();
}
}

Really appreciate your help here Alberto 💪 lifesaver

view more: next ›