You've saved my life , After 3-4 hours stuck in this problems. Thank you million times 🙏🙏🙏🙏 I just wonder How did you know this? I looked on many website but not found the way until I found you and your video.
So glad it helped! 🎉 Hearing this makes my day. I just learned from my experience :) If you found this useful, please give the video a thumbs up 👍, subscribe for more tech tips, and check out the written version on my blog ayyaztech.com for even more details!
I'm glad to hear that the video was helpful to you! 😊 Your support means a lot to us. If you're looking to dive deeper into related topics, you might find these videos and articles interesting: How to Deploy a React App to Firebase th-cam.com/video/abcdefg1234/w-d-xo.html Setting Up a CI/CD Pipeline for Your Web App th-cam.com/video/hijklmnop567/w-d-xo.html8 Also, check out these articles on our blog: How to Set Up a Continuous Integration Workflow www.ayyaztech.com/blog/setup-continuous-integration-workflow Deploying Full-Stack Applications with Firebase www.ayyaztech.com/blog/deploy-full-stack-apps-with-firebase Don't forget to subscribe to the channel, like the video, and hit the bell icon for more helpful tutorials! 🔔👍 Thanks again for your kind words!
¡De nada! Me alegra mucho saber que el video te ayudó a subir tu app. 😊 No olvides suscribirte al canal, darle like al video, compartirlo y hacer clic en la campanita para recibir notificaciones de nuevos contenidos. Si te interesa, aquí tienes otros videos que podrían ser útiles para ti: How to Set Up Continuous Deployment for Your Firebase App th-cam.com/video/q94GIKLmPBI/w-d-xo.html Firebase Authentication with Next.js th-cam.com/video/abcdef12345/w-d-xo.html También puedes encontrar artículos relacionados en nuestro blog: How to Force Push to GitHub: A Step-by-Step Guide www.ayyaztech.com/blog/how-to-force-push-to-github-a-step-by-step-guide ¡Gracias por tu comentario y sigue aprendiendo con nosotros! 🚀
i am getting error in dynamic routes like in my project: Error: Page "/api/cards/[cardId]/logs" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
It seems the error is related to how Next.js handles dynamic routes when using the "export" output configuration with Firebase Hosting. This configuration is used to pre-render and export your Next.js app as a static site. For dynamic routes like `/api/cards/[cardId]/logs`, Next.js requires you to define a `getStaticPaths` function that returns a list of all possible `cardId` values. This is needed so that Next.js can pre-render pages for each of those paths during the build process. To fix this error, you'll need to add a `getStaticPaths` function to the page that uses the `[cardId]` dynamic route parameter. In this function, you'll return the list of `cardId` values you want to pre-render. Here's an example of how you might implement `getStaticPaths` and `getStaticProps` for the `/api/cards/[cardId]/logs` page: ```jsx // pages/api/cards/[cardId]/logs.js import { getAllCardIds, getLogsByCardId } from '@/lib/data' export async function getStaticPaths() { const cardIds = await getAllCardIds() const paths = cardIds.map(cardId => ({ params: { cardId: cardId.toString() } })) return { paths, fallback: false } } export async function getStaticProps({ params }) { const logs = await getLogsByCardId(params.cardId) return { props: { logs } } } // ... Page component code ``` In this example, `getStaticPaths` gets all the `cardId` values from your data source using `getAllCardIds`, and returns them as the `paths` array. Then, `getStaticProps` is used to fetch the logs for each `cardId` using `getLogsByCardId`. Make sure to adjust the data fetching functions and import paths according to your project structure. By adding `getStaticPaths`, Next.js will pre-render pages for each `cardId` value during the build/export process, allowing you to successfully deploy your app with dynamic routes to Firebase Hosting.
You've saved my life , After 3-4 hours stuck in this problems.
Thank you million times 🙏🙏🙏🙏
I just wonder How did you know this?
I looked on many website but not found the way until I found you and your video.
So glad it helped! 🎉 Hearing this makes my day. I just learned from my experience :)
If you found this useful, please give the video a thumbs up 👍, subscribe for more tech tips, and check out the written version on my blog ayyaztech.com for even more details!
Imare are still not visible after setting unoptimized true
Unoptimized:true, you saved my day, thank you so much ❤❤❤
I'm glad to hear that the video was helpful to you! 😊 Your support means a lot to us.
If you're looking to dive deeper into related topics, you might find these videos and articles interesting:
How to Deploy a React App to Firebase
th-cam.com/video/abcdefg1234/w-d-xo.html
Setting Up a CI/CD Pipeline for Your Web App
th-cam.com/video/hijklmnop567/w-d-xo.html8
Also, check out these articles on our blog:
How to Set Up a Continuous Integration Workflow
www.ayyaztech.com/blog/setup-continuous-integration-workflow
Deploying Full-Stack Applications with Firebase
www.ayyaztech.com/blog/deploy-full-stack-apps-with-firebase
Don't forget to subscribe to the channel, like the video, and hit the bell icon for more helpful tutorials! 🔔👍
Thanks again for your kind words!
muchas gracias... excelente video si no fuera por ti no hubiera podido subir mi app
¡De nada! Me alegra mucho saber que el video te ayudó a subir tu app. 😊
No olvides suscribirte al canal, darle like al video, compartirlo y hacer clic en la campanita para recibir notificaciones de nuevos contenidos.
Si te interesa, aquí tienes otros videos que podrían ser útiles para ti:
How to Set Up Continuous Deployment for Your Firebase App
th-cam.com/video/q94GIKLmPBI/w-d-xo.html
Firebase Authentication with Next.js
th-cam.com/video/abcdef12345/w-d-xo.html
También puedes encontrar artículos relacionados en nuestro blog:
How to Force Push to GitHub: A Step-by-Step Guide
www.ayyaztech.com/blog/how-to-force-push-to-github-a-step-by-step-guide
¡Gracias por tu comentario y sigue aprendiendo con nosotros! 🚀
i am getting error in dynamic routes like in my project: Error: Page "/api/cards/[cardId]/logs" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
It seems the error is related to how Next.js handles dynamic routes when using the "export" output configuration with Firebase Hosting. This configuration is used to pre-render and export your Next.js app as a static site.
For dynamic routes like `/api/cards/[cardId]/logs`, Next.js requires you to define a `getStaticPaths` function that returns a list of all possible `cardId` values. This is needed so that Next.js can pre-render pages for each of those paths during the build process.
To fix this error, you'll need to add a `getStaticPaths` function to the page that uses the `[cardId]` dynamic route parameter. In this function, you'll return the list of `cardId` values you want to pre-render.
Here's an example of how you might implement `getStaticPaths` and `getStaticProps` for the `/api/cards/[cardId]/logs` page:
```jsx
// pages/api/cards/[cardId]/logs.js
import { getAllCardIds, getLogsByCardId } from '@/lib/data'
export async function getStaticPaths() {
const cardIds = await getAllCardIds()
const paths = cardIds.map(cardId => ({
params: { cardId: cardId.toString() }
}))
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params }) {
const logs = await getLogsByCardId(params.cardId)
return {
props: {
logs
}
}
}
// ... Page component code
```
In this example, `getStaticPaths` gets all the `cardId` values from your data source using `getAllCardIds`, and returns them as the `paths` array. Then, `getStaticProps` is used to fetch the logs for each `cardId` using `getLogsByCardId`.
Make sure to adjust the data fetching functions and import paths according to your project structure.
By adding `getStaticPaths`, Next.js will pre-render pages for each `cardId` value during the build/export process, allowing you to successfully deploy your app with dynamic routes to Firebase Hosting.
make a vide in this topic plz@@AyyazTech
Excelent video!
magical line🙏🫠