I'm having trouble importing csv data into my nextjs app to read with d3.
I understand that static files must be in the public directory and only absolute paths will work, but although I get the absolute path with process.cwd(), it doesn't seem to find the file. I can't import the csv at the top of the js file either?
My index.js is
import { useState, useEffect } from 'react'
import path from 'path'
import Head from 'next/head'
import { csv } from "d3"
export async function getStaticProps(context) {
const dataPath = path.join(process.cwd(), 'public/data/harry_potter.csv')
console.log("DATA PATH: ", typeof dataPath)
const data = await csv(dataPath)
console.log("DATA", data)
if (!data) {
return {
notFound: true,
}
}
return {
props: {}, // will be passed to the page component as props
}
}
export default function Home(props) {
useEffect(() => {
console.log("DATA", props)
}, [])
return (
<div className="container">
<Head>
<title>d3 exercise</title>
</Head>
<main>
</main>
</div>
)
}
My path is:
C:UsersdavidDocumentsd3-pluralsightex1publicdataharry_potter.csv
And the nextjs app directory is
C:UsersdavidDocumentsd3-pluralsightex1
But I still get:
TypeError: Only absolute URLs are supported
I can't import like this either
import harry from '../public/data/harry_potter.csv'
Am I missing something? Does Next not recognise csv files without extra config?
EDIT: using csv-loader loads the csv, but doesn't give access to d3's powerful type conversion functions. If I just write my own function js runs out of memory with csvs with 20000 rows
question from:https://stackoverflow.com/questions/65599374/import-csv-into-nextjs-and-read-with-d3
