Hi @flint pumice. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#SSR questions
cedar belfryBOT
Para lograr que solo se actualice el componente hijo que cambió, puedes utilizar la función revalidatePath con el parámetro de la ruta exacta del componente hijo que deseas revalidar.
Por ejemplo, si tienes una ruta como pages/blog/[slug].js y una reescritura de /post-1 -> /blog/post-1, necesitarías llamar a res.revalidate('/blog/post-1') para revalidar específicamente ese componente hijo.
Aquí tienes un ejemplo de cómo se vería el código:
import { revalidatePath } from 'next/cache'
export async function GET(request: NextRequest) {
const path = request.nextUrl.searchParams.get('path')
if (path) {
revalidatePath(path)
return NextResponse.json({ revalidated: true, now: Date.now() })
}
return NextResponse.json({
revalidated: false,
now: Date.now(),
message: 'Missing path to revalidate',
})
}
En este ejemplo, path sería la ruta del componente hijo que deseas revalidar.
Es importante tener en cuenta que la función revalidatePath invalida tanto la Data Cache como la Full Route Cache, lo que significa que se revalidarán los datos y se volverá a renderizar la ruta. Si solo deseas re-renderizar la ruta sin invalidar la Data Cache, puedes usar router.refresh() en su lugar.
Puedes encontrar más información sobre revalidatePath y cómo usarlo en la documentación oficial de Next.js (https://nextjs.org/docs/app/api-reference/functions/revalidatePath).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
flint pumice
@cedar belfry Como puedo hacer para que cuando navegue a otra ruta, la parallel route activa deje de estarlo?
cedar belfryBOT
Let me check the knowledge base for you. One moment! :books:
Para que una ruta paralela activa deje de estarlo cuando navegas a otra ruta, puedes utilizar la función router.back() de Next.js. Esta función te permite volver a la página anterior, lo que efectivamente desactivará la ruta paralela activa.
Aquí tienes un ejemplo de cómo se vería el código:
'use client'
import { useRouter } from 'next/navigation'
export default async function Login() {
const router = useRouter()
return (
<Modal>
<span onClick={() => router.back()}>Close modal</span>
<h1>Login</h1>
...
</Modal>
)
}
En este ejemplo, cuando haces clic en "Close modal", se llama a router.back(), lo que te lleva a la página anterior y cierra la ruta paralela activa.
Además, si deseas navegar a otra ruta y al mismo tiempo cerrar una ruta paralela activa, puedes utilizar una ruta de captura de todo (catch-all route). Aquí tienes un ejemplo de cómo se vería el código:
app/@auth/[...catchAll]/page.tsxTypeScript
export default function CatchAll() {
return null
}
En este ejemplo, la ruta de captura de todo toma precedencia sobre default.js, lo que significa que cuando navegas a esta ruta, se cierra la ruta paralela activa.
Puedes encontrar más información sobre cómo trabajar con rutas paralelas en la documentación oficial de Next.js (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
flint pumice
@cedar belfry Como puedo hacer que un Link actúe igual que router.back()?
cedar belfryBOT
Let me check the knowledge base for you. One moment! :books:
Para hacer que un componente <Link> actúe de la misma manera que router.back(), puedes usar el hook useRouter de Next.js y llamar a la función router.back() en un evento onClick. Aquí tienes un ejemplo de cómo se vería el código:
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.back()}>
Click here to go back
</button>
)
}
En este ejemplo, cuando haces clic en el botón, se llama a router.back(), lo que te lleva a la página anterior. Este comportamiento es equivalente a hacer clic en el botón de retroceso del navegador.
Puedes encontrar más información sobre cómo usar router.back() en la documentación oficial de Next.js (https://nextjs.org/docs/pages/api-reference/functions/use-router).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
flint pumice
@cedar belfry para que se usa default.js y [...catchAll]
cedar belfryBOT
Let me check the knowledge base for you. One moment! :books:
El archivo default.js se utiliza en Next.js como un mecanismo de fallback para renderizar contenido cuando Next.js no puede recuperar el estado activo de un slot basado en la URL actual. Esto es especialmente útil en el caso de las rutas paralelas, donde el contenido que Next.js renderiza puede variar dependiendo de la técnica de enrutamiento y la estructura de las carpetas. Si no se puede renderizar el estado activo de un slot, Next.js intentará renderizar el archivo default.js del slot no coincidente. Si ese archivo no está disponible, se renderiza un error 404. Puedes encontrar más información sobre esto en la documentación oficial de Next.js (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes).
Por otro lado, **...catchAll] se utiliza para crear rutas de captura de todo (catch-all routes) en Next.js. Estas rutas pueden capturar todas las rutas subsecuentes. Por ejemplo, pages/shop/[...slug].js coincidirá con /shop/clothes, pero también con /shop/clothes/tops, /shop/clothes/tops/t-shirts, y así sucesivamente. Los parámetros coincidentes se enviarán como un parámetro de consulta (slug en el ejemplo) a la página, y siempre será un array. Puedes encontrar más información sobre esto en la [documentación oficial de Next.js** (https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
flint pumice
@cedar belfry Estoy en la ruta / y navego a la ruta /book/1, lo cual activa una ruta paralela. Si quiero navegar a la ruta /car, esperaría que esa ruta paralela dejase de mostrarse, pero lo sigue haciendo
cedar belfryBOT
Let me check the knowledge base for you. One moment! :books:
Para desactivar una ruta paralela cuando navegas a otra ruta, puedes utilizar una ruta de captura de todo (catch-all route). Esta ruta tomará precedencia y se renderizará en lugar de la ruta paralela. Aquí tienes un ejemplo de cómo se vería el código:
app/@auth/[...catchAll]/page.tsxTypeScript
export default function CatchAll() {
return null
}
En este ejemplo, cuando navegas a la ruta /car, la ruta de captura de todo se activará y la ruta paralela se desactivará.
Es importante tener en cuenta que las rutas de captura de todo toman precedencia sobre default.js. Esto significa que si tienes un archivo default.js en la misma carpeta que tu ruta de captura de todo, la ruta de captura de todo se renderizará en lugar del default.js.