Get dynamic routes working on production

Remove unused api

site/pages/addapp/[[...app]].js

@@ -4,8 +4,34 @@ import { saveAs } from 'file-saver';
 import CreatableSelect from 'react-select/creatable';
 import Select from 'react-select';
 import { useRouter } from 'next/router'
+import allapps from '../../../public/list.json'
 
-export default function AddApp() {
+
+export async function getStaticPaths() {
+  let paths = allapps.apps.map(app => ({
+    params: {
+      app: [btoa(app.name)]
+    }
+  }))
+  paths.push({
+    params: { app: null }
+  })
+  return {
+    paths,
+    fallback: false, // can also be true or 'blocking'
+  }
+}
+
+// `getStaticPaths` requires using `getStaticProps`
+export async function getStaticProps({ params }) {
+  const app = params.app
+  return {
+    // Passed to the page component as props
+    props: { app: app ?? null },
+  }
+}
+
+export default function AddApp({ app = null }) {
 
   function friendlyUrl(url) {
     // make the url lowercase         
@@ -50,7 +76,7 @@ export default function AddApp() {
   const [ext, setExt] = useState('png')
   const [inlineImage, setInlineImage] = useState(null)
 
-  const [application, setApplication] = useState({
+  const defaultState = {
     friendly_name: null,
     image_src: null,
     description: null,
@@ -64,17 +90,24 @@ export default function AddApp() {
     require_gpu: false,
     enabled: true,
     image_type: 'Container',
-  })
+  }
+
+  const [application, setApplication] = useState(defaultState)
 
   const router = useRouter()
-  const { app } = router.query
+  // const { app } = router.query
 
   useEffect(() => {
-    fetch('../../list.json')
+    if(app === null) {
-      .then((res) => res.json())
+      description.current.value = ''
-      .then((apps) => {
+      name.current.value = ''
-        if (app && app[0]) {
+      friendly_name.current.value = ''
-          const appDetails = apps.apps.find(el => el.name === atob(app[0]))
+      setCategories(null)
+      setArchitecture(null)
+      setApplication(defaultState)
+    }
+    else if (app && app[0]) {
+      const appDetails = allapps.apps.find(el => el.name === atob(app[0]))
       delete appDetails['sha']
       description.current.value = appDetails.description
       name.current.value = appDetails.name
@@ -103,7 +136,6 @@ export default function AddApp() {
         ...appDetails
       })
     }
-      })
   }, [app])
 
   const displayApplication = () => {

site/pages/api/hello.js

@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' })
-}