NextJS Dynamic Routing - Is it possible to set array of route names?

Question

I'm using dynamic routing in my app. Here is the folder structure I'm working with

-pages
  -department
    -[slug].js

Now I want to show the page if only the slug value is cse, eee, swe, english e.t.c otherwise I want to show the 404 Not Found page. Is there any way to set the array of route names ? Then, if slug value(which I can get using getServerSideProps) is included in that array, I will serve the page otherwise serve the 404 Not Found page.

Why I need that ?

In getServerSideProps function, I'm getting data from api end-point. In this case if slug value is not included in the api-endpoint, server throws Request failed with status code 501 error! So if slug value is cse, the api-endpoint is available and I can get the data. If slug value is anything or xyasdfs, the api-endpoint is not available and I can't get the data and the server throws the following error.

user_6162261 · Answer

i would check in my component for a property in my response body.. like, if all the departments have a name,, then check for it, if it doesn't exist, then return a 404.

user_4811482 · Answer

It should be something like this to render from server side

Page.getInitialProps = async ({query}) => {
  if(query.slug == 'cse') {
    //codes
  }
}

or you can use next Router hook https://nextjs.org/docs/routing/dynamic-routes

NextJS Dynamic Routing - Is it possible to set array of route names?

2 Answers