Running npm run export fails when fetching local json data

[jakewies]

I am attempting a NextJS powered website/blog that is 100% static as of NextJS v3.

Here is the flow I am trying to achieve:

• write post in markdown
• process post to JSON file
• store JSON file in local /posts directory

The flow outlined above is being done similarly to how next-blog is working.

The post.js page fetches the specific JSON from /posts according to the query.id:

// post.js

import fetch from 'isomorphic-fetch'

...

Post.getInitialProps = async ({ query }) => {
  const res = await fetch(`/posts/${query.id}`)
  const post = await res.json()
  return post
}

I'm also using a custom Express server to handle the /posts/:id route:

// server.js

...

server.get('/posts/:id', (req, res) => {
    const post = JSON.parse(fs.readFileSync(`./posts/${req.params.id}.json`, 'utf8'))
    res.send(post)
})

Everything works fine in dev mode, but fails on npm run export:

Error: only absolute urls are supported

It's clear to me that when running npm run export next will run getInitialProps "on the server" ( i don't know any other way of putting it ), and fetch doesn't know how to resolve the file path.

I've seen the Error above mentioned in issue #1213, and one of the solutions given was to form a baseUrl, checking the req parameter to do so:

static getInitialProps ({ req }) {
  const baseUrl = req ? `${req.protocol}://${req.get('Host')}` : '';
  const response = await fetch(baseUrl + '/posts');
}

The problem with this is that the req parameter, though exists, doesn't contain anything helpful. It only contains the url of the page:

{ url: '<relative page url>' }

The only example I can find in the docs is fetching post data from an external source. See here:

static async getInitialProps ({ query }) {
    // fetch single post detail
    const response = await fetch(`http://jsonplaceholder.typicode.com/posts/${query.id}`)
    const post = await response.json()
    return { ...post }
  }

The fact that my blog post data is stored in local JSON files makes this difficult. Is there a built-in way to handle this issue using next?

[arunoda]

Actually , this is not a bug but the behavior of static apps.
We don't run a server when doing exports. So, you can't fetch from local routes in your custom server.

May be you can require those files directly inside getInititalProps or use another server.