Dynamic route on vercel throws 404

Unanswered

Californian posted this in #help-forum

CalifornianOP

2023-07-31T09:28:06.000Z

I have 3 main pages
The homepage
The blog page with article (src/app/blog/[slug])
And the watchlist page (src/app/watchlist/movies/[id])

The homepage works fine, also the blog page works fine using generateStaticParams, but everytime I tried to access watchlist it always gives me 404 Page, but locally it works
http://localhost:3000/watchlist/movies/Jw6hSkBjy00VKb0UeV3W works
https://www.heresmoviey.com/watchlist/movies/Jw6hSkBjy00VKb0U doesn't work

21 Replies

CalifornianOP

2023-07-31T09:31:02.000Z

The build logs

This is the next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export'
}

module.exports = nextConfig

This is the src/app/watchlist/movies/[id]/.page.jsx

'use client'
- bunch of import here -

'use client'

import Header from "@components/Header"
import WatchlistMoviesCardContainer from "@components/filterList/WatchlistMoviesCardContainer"
import TopContainer from "@components/filterList/TopContainer"
import Footer from '@components/Footer'
import { useFilteredMovies } from "@lib/useFilteredMovies"
import WatchlistMoviesTopCardContainer from "@components/filterList/WatchlistMoviesTopCardContainer"

const MovieList = () => {
  const { filteredMovies, listName, isLoading } = useFilteredMovies()

  if (isLoading) {
    return (
      <div>
        Loading...
      </div>
    )
  }

  return (
    <>
      <Header />
      <div className="font-dmsans p-3 1024px:p-12 1280px:px-24 1680px:px-32">
          <TopContainer 
              listName={ listName } 
          />
          <div className='1024px:px-7 1920px:px-32'>
              <WatchlistMoviesTopCardContainer movies={ filteredMovies } />
          </div>
          <div className='1024px:px-7 1280px:px-16 1920px:px-60'>
              <WatchlistMoviesCardContainer movies={ filteredMovies } />
          </div>
      </div>
      <Footer />
    </>
  )
}

export default MovieList

And in useFilteredMovies.jsx basically just filter movie function but also this

import { useParams } from 'next/navigation'
- bunch of import here -
export function useFilteredMovies() {
  const params = useParams()
  const { data, isLoading } = useWatchlistMovies(params.id)
- bunch of useState here -
}

and I'm using react query to fetch to my firestore
useWatchListMovies.jsx

import { useQuery } from 'react-query'
import { db } from '@config/firebase_config'
import { doc, getDoc } from 'firebase/firestore' 

export default function useWatchlistMovies(filterPath) {

    return useQuery(['watchlistMovies', filterPath], async () => {
  
      const listRef = doc(db, 'lists', filterPath)
      const listDoc = await getDoc(listRef)
  
      if(!listDoc.exists()) {
        throw new Error('List not found')
      }
  
      const listName = listDoc.data().name
  
      const movieRefs = listDoc.data().movies
      const movieIds = movieRefs.map(ref => ref.id)  
  
      const movieDocsPromises = movieIds.map(id => getDoc(doc(db, 'movies', id)))
      const movieDocs = await Promise.all(movieDocsPromises)
      
      const movies = movieDocs.map(doc => doc.data())
  
      return {
        listName,
        movies 
      }

  }, {
    cacheTime: 7 * 24 * 60 * 60 * 1000
  })

}

This is the website in case you want to try it
https://www.heresmoviey.com/

Sander

2023-07-31T09:41:26.000Z

console log the exact url the request is done to, make sure that resource exists

CalifornianOP

2023-07-31T09:48:15.000Z

Sorry, I don't really get what you mean

I do got this in the logs in heresmoviey.com though
GET https://www.heresmoviey.com/watchlist/movies/Jw6hSkBjy00VKb0UeV3W.txt?_rsc=a768e99 404

Sander

2023-07-31T09:56:48.000Z

what do your routes look like

CalifornianOP

2023-07-31T09:58:26.000Z

src/app/watchlist/movies/[id]

Where id is supposed to be something like
Jw6hSkBjy00VKb0UeV3W,
dyOzZW7D5tXb41v6OJ3t

in https://www.heresmoviey.com/watchlist/movies/Jw6hSkBjy00VKb0U
also
GET https://www.heresmoviey.com/watchlist/movies/Jw6hSkBjy00VKb0U 404

Sander

2023-08-01T05:27:18.000Z

Screenshot of the file structure?

CalifornianOP

2023-08-01T06:40:03.000Z

Sweat bee

2023-08-01T09:59:17.000Z

@Californian insted of page.jsx , try changing it's name to index.js

CalifornianOP

2023-08-01T10:29:24.000Z

Same, doesnt work. It even doesnt even recognize watchlist anymore

Route (app)                                                                    Size     First Load JS
â”Œ â—‹ /                                                                          86.7 kB         184 kB
â”œ â—‹ /blog                                                                      1.67 kB          89 kB
â”” â— /blog/[slug]                                                               1.66 kB          89 kB
    â”œ /blog/this-is-your-brain-when-selecting-the-perfect-movies-to-watch
    â”œ /blog/this-is-not-your-brain-when-selecting-the-perfect-movies-to-watch
    â”œ /blog/here-s-the-perfect-movie
    â”” [+3 more paths]
+ First Load JS shared by all                                                  77.7 kB
  â”œ chunks/769-ec939e5298bdc297.js                                             25.2 kB
  â”œ chunks/bce60fc1-776d39e0cec703d0.js                                        50.5 kB
  â”œ chunks/main-app-c35416ab9f6f2b31.js                                        219 B
  â”” chunks/webpack-47d86c5b1c25fd31.js                                         1.73 kB

Route (pages)                                                                  Size     First Load JS
â”€ â—‹ /404                                                                       182 B          75.5 kB
+ First Load JS shared by all                                                  75.3 kB
  â”œ chunks/framework-8883d1e9be70c3da.js                                       45 kB
  â”œ chunks/main-d2667d6bf39ce843.js                                            28.4 kB
  â”œ chunks/pages/_app-998b8fceeadee23e.js                                      195 B
  â”” chunks/webpack-47d86c5b1c25fd31.js                                         1.73 kB

â—‹  (Static)  automatically rendered as static HTML (uses no initial props)
â—  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

Sander

2023-08-01T21:33:27.000Z

First of all pages should not be client components. Rather make a client component and put it in the page. That's just an observation. It would otherwise prevent you from exporting metadata.

Also maybe check use params is not returning an empty object.

I would abstract things away and rebuild it step by step until it doesn't do what you expect.

Sweat bee

2023-08-02T06:17:03.000Z

all the routes should be in pages folder

@Sweat bee all the routes should be in pages folder

CalifornianOP

2023-08-03T07:27:15.000Z

Yeah, thank you so much for helping me, Mate, but that's pages router. I'm using app router

Anyway, I've found the solution. The problem is in the output: 'export' I deleted that then boom it works fine