menu

Next.js

A place to chat about Next.js and answer questions. For all other ZEIT products, check this out.

Channels
Team

getStaticProps and node apis

January 7, 2020 at 10:46am
The Next.js community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

getStaticProps and node apis

January 7, 2020 at 10:46am
Hi, v quick question: is it possible to use node apis like fs and child_process inside getStaticProps? I've been using preval until now for one-time generated local/filesystem stuff, but it would be nice to make explicit use of the framework's features.
Thanks!

January 7, 2020 at 1:02pm
Yup! You can import server-side only dependencies and use them freely.
  • reply
  • like
Great, thank you. So any errors I get around "can't resolve module child_process" are an issue with my code...
  • reply
  • like
It looks like there are problems running node things in dev mode, while they work fine when built and served. Is there a recommended approach for this?
  • reply
  • like
Could you share an example? I'd need to see what you're doing to confirm.
  • reply
  • like
I suspect I'm doing too many things at once. I'll try and strip down to a single example case and come back if I still see issues.
  • reply
  • like
More than happy to take a look at a larger example. These are usually pretty easy to narrow down!
  • reply
  • like

January 8, 2020 at 10:44am
I've just had a go at building a standalone test case and had more trouble than before! Unfortunately, I'm behind a corporate firewall which means I can't push a repo to GH or anything useful, but I've set up the absolute minimum next install from scratch (npm i next react react-dom isomorphic-unfetch) then created pages/index.js as listed here.
  • reply
  • like
Oh, enter posts the message. Code to follow:
  • reply
  • like
pages/index.js
import React from 'react';
import fetch from 'isomorphic-unfetch';
import getRecentCommits from '../src/git';
export async function getStaticProps() {
const res = await fetch('https://api.github.com/repos/zeit/next.js');
const json = await res.json();
const commits = getRecentCommits();
console.log(json, commits);
return {
props: {
stars: json.stargazers_count,
commits,
},
};
}
function HomePage({ stars }) {
return <div>Next stars: {stars}</div>;
}
export default HomePage;
src/git.js contains a little spawn util that runs git log in a child process and returns the stdout. It's a good analogue of what I was trying to do in the main project
  • reply
  • like
Thing is, getStaticProps doesn't seem to get called in either dev mode or when built, and including the import of src/git (which in turn imports child_process) throws module not found on both dev and build. Without that git import, next build outputs the home page as static, not SSG, according to the console.
I must have missed something really simple and obvious, but I'm a bit thrown. V grateful for any suggestions! (next is installed at 9.1.7)
  • reply
  • like
build log for reference:
> next build
Creating an optimized production build
Failed to compile.
./src/git.js
Module not found: Can't resolve 'child_process' in '/next-test/src'
  • reply
  • like
and build log without the local git import:
> next build
Creating an optimized production build
Compiled successfully.
Automatically optimizing pages
Page Size
─ ○ / 505 B
+ shared by all 68.4 kB
├ chunks/commons.js 62.6 kB
├ runtime/main.js 5 kB
└ runtime/webpack.js 746 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
  • reply
  • like
ah, getStaticProps doesn't exist yet. If you want to test the experimental feature, you need to rename that function to unstable_getStaticProps.
  • reply
  • like
i.e. export function unstable_getStaticProps() { ... }
Edited
  • reply
  • like
🤦‍♂️
  • reply
  • like
Well that explains it!
  • reply
  • like
Thanks very much for clearing that up
  • reply
  • like
Just realized you linked to the non unstable variant of this function in our docs. Do note, docs prefixed with _ are hidden / unstable! You can find the latest version on https://nextjs.org!
  • reply
  • like

January 9, 2020 at 9:23am
I should have spotted that. Can't remember how I found those docs now, might have been some aggressive googling...
  • reply
  • like
I have now made unstable_getStaticProps work perfectly with a whole set of node apis - fantastic stuff. Of course, now I have a new question, which I'll raise separately. Thanks for sorting me out.
  • reply
  • like
~Feel free to ask here.~ Just saw the new thread.
Edited
  • reply
  • like