Next.js Discord

Discord Forum

modals

Unanswered
Persian posted this in #help-forum
Open in Discord
PersianOP
Hey!
I´m trying to understand how to best build a modal. I must say I have tried to r ead the documentation, but I dont get any clevier.

parallel-routes
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
The @auth slot renders a <Modal> component that can be shown by navigating to a matching route, for example /login.
What does that even mean? In their examples they never send any prop to Model. It is just a parent to the content. They don´t import anything, the component is just there in the examples they provide. 
//next.js example
import { Modal } from 'components/modal'
 
export default function Login() {
  return (
    <Modal>
      <h1>Login</h1>
      {/* ... */}
    </Modal>
  )
}

In Intercepting-routes
There is no further information provided. that help me.


Couldnt i be able to build a Model component that takes in a children and the route? And render that on a onClick event? Do i need to use (..) or @ on my folders for that?

41 Replies

Ray
create app/@auth/login/page.tsx and render the auth on app/layout.tsx
the <Modal /> can be a component with some css
https://github.com/vercel-labs/nextgram
take a look from this example
PersianOP
is layout a special name or is it my component? so it could be any name?
Ray
@auth this could be any name you like
but space does not work
PersianOP
sorry i still dont geet it
Ray
https://github.com/vercel-labs/nextgram
take a look of this
they name the parallel route to @modal
so the app/layout.tsx receive modal in the props
PersianOP
So in @modals i can build all my modals?

lets say i want to have 3 different
Ray
yeah create it at
app/@modals/login/page.tsx
app/@modals/signup/page.tsx
app/@modals/logout/page.tsx
PersianOP
Okey so this would not work
@Modal
/loginModal
//page.tsx
/activityModal
//page.tsx
/nutritionModal.
the directory would look like
/app
@Modal
/loginModal
page.tsx
@Modal
/activityModal
page.tsx
@Modal
/nutritionModal
page.tsx
... Other pages
Ray
wait you can only have one @Modal
or create it in different name
PersianOP
Okey so it would look like:
/app
@Modal
/login
page.tsx
/physicalModal
page.tsx
... other pages under /app directory
Ray
do you want the url for physicalModal as /physicalModal?
PersianOP
This may make my example more clear
No i just want my modals to be pop-up and not have a URL if i could decide.
Ray
well if you create modal with parallel route, it will change the url
because it is a page
PersianOP
My first solution would be to get the body element and appened it when i want to show it. And style it with position:absolute. 

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}
Build a modal component where i take in a children and queryselector the body and render it in there.
Then i build what ever i want to render as a modal as "modal page"
Ray
oh I'm not sure if it will work
or the page is client component and doing client side fetching?
PersianOP
What do you mean?

the code above is next.js defualt code when we start a project.
prob servre rendered 
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}
PersianOP
Becuase of that my first solution wont work?
yeah, stupied question, lol
Ray
not sure, I have never tried lol
PersianOP
The @ just make it really messy to look at when it comes to the folder structure.

Is it possible to make a Modal with out a URL?
Ray
yes create the modal with react useState
PersianOP
so i build a modal component, send in a children and controll it. with a state.
Ray
yes
you can still fetch the initial data on the server
PersianOP
My other solution. I wanted to use as much next.js stuff as possible to learn more next.js but I dont like it. I understand the parallel stuff if you want to be able to render a page as a model and a page.
Thanks for the chat. I helped me sort out some thoughts