How to deploy NEXTJS app on Google hosting if it contains [id].js page?

user_1306271 0
Viewed 216

I have an application which uses Google hosting. Prior to implementing dynamic routes I hosted it by executing next export and firebase deploy.

In my [id].js file I get data by using getServerSideProps and while executing next export I've got the next error:

pages with getServerSideProps can not be exported Read More.

And the solution is to "delete next export from package.json". But How can I host my app without next export ?

next.js
2 Answers

why not hosting your app on vercel? it makes everything so easy. if you really want to host it on google, replace getServerSideProps by getStaticProps or with client side rendering

user_118530320

I found just one solution for this situation, it is the using getStaticProps and getStaticPaths instead of getServerSideProps, here's example from official documentation how to use it properly:

// pages/posts/[id].js

function Post({ post }) {
  // Render post...
}

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

export default Post
user_13062710
Related