getStaticProps and custom servers

[Timer]

Hey,

have you anyone tried this solution with custom server and get it working?

Example:

// server.js

const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('/blog/:id', (req, res) => {
    console.log('My params needed be passed to page:', req.params);
    return app.render(req, res, '/blogDetail', { id: req.params.id });
  });

  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

// blogDetail.js
export async function unstable_getStaticProps(props) {
  console.log('What is passed', props);

  return {};
}

const BlogPostPage = ({ post }) => {
  return <div>Hey</div>;
}

export default BlogPostPage;

# Terminal output

My params needed be passed to page: { id: 'test' }
What is passed { params: undefined }

Originally posted by @homoky in #9524 (comment)

[Timer]

Thanks for bringing this to our attention!

getStaticProps currently only supports params coming from Next.js' built-in dynamic routes (sourced via getStaticPaths).

I'm not sure if we're going to change this.

---

In this example, you can completely eliminate your custom server and rename your page from pages/blogDetail.js to pages/blog/[id].js.

[Timer]

Actually, in this exact example the page is even being rendered on-demand and not static as it should be. I'm going to close this as a non-goal of the API design.

[homoky]

Thank you for your explanation.

I would like to quickly reply:

Actually, in this exact example the page is even being rendered on-demand and not static as it should be.

Yeah I am aware of it, I wanted to make sure it does support it in the dev mode. If this method is not supported the second one for getting static paths will not be as well.

Thanks

[HofmannZ]

@Timer So there is no change to get this working with, for example, Firebase cloud functions?

[timneutkens]

@HofmannZ @homoky seems that you're both misunderstanding what getStaticProps does , it renders the provided paths from getStaticPaths to static HTML at build time. The way that you provided the example you'd want to use getServerProps which renders on-demand.

[HofmannZ]

@timneutkens I've misread the title, we're trying to use unstable_getServerProps but does not seem to work with a custom server. Is that something you're aware of? Would love to contribute some test cases of scenarios we have in mind where this could be useful.

[timneutkens]

@HofmannZ it's not implemented yet, keep in mind that you're using experimental features.

Relevant PR: #10077

[dtb-david]

Thanks for bringing this to our attention!

getStaticProps currently only supports params coming from Next.js' built-in dynamic routes (sourced via getStaticPaths).

I'm not sure if we're going to change this.

In this example, you can completely eliminate your custom server and rename your page from pages/blogDetail.js to pages/blog/[id].js.

@Timer, @timneutkens I'm just wondering whether there is any plan to support getStaticProps with a custom server yet?

Just to give some context as to why I ask. We're currently building an ecommerce front end and know our clients would not want '/category/[...slug]' or '/product/[...slug]' as they require full control over their URLs.

Ideally we'd like to be able to offer static/pre rendered pages especially with the new 'Incremental Static Regeneration' in the pipeline but are currently unable to do so.

If getStaticProps with custom servers is not in the pipeline can you think of any suggestions that might solve the issue?

[blakewilson]

👋 @Timer @timneutkens Has there been any further consideration around this?

I have a use case where allowing the mutation of the query parameter from the render method of a Next.js custom server could be helpful from a getStaticProps perspective.

For example, I have a project that mimicks the routing of the WordPress Template Hierarchy, instead of the default Next.js routing. Currently getServerSideProps works as expected, but getStaticProps does not, as I'm not able to alter the query, which is needed for this type of example.

You can check out the reproduction and what I'm referring to here:
https://github.com/blakewilson/next-wp-templates-hierarchy

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.