Importing JSON data from public folder with NextJS

Question

I am trying to import a globe.json file under my public folder but I am returned with Module not found: Can't resolve '/globe.json'

This is my current file structure:

public
    globe.json
src
    lib
        test.json
    pages
        index.jsx

globe.json example:

{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "POP_EST": 34124811,
          "ECONOMY": "7. Least developed region",
          "INCOME_GRP": "5. Low income",
          "ISO_A2": "AF",... }

and the import method:

import countries from '/globe.json'

From the file structure, I also have a test.json file which I have imported with no issues following the method below:

import countries from '@/lib/test.json'

I have also made reference to this question, Loading content from a static JSON Next JS, the only difference is that the example in the question imports from the api folder, similar to how it seems to be working for me with the lib folder. The expected behavior is to be able to import from the public folder without named paths since it's the public folder, instead of not being able to resolve the import.

My questions are, why does the import not work with the public folder and are there any impactful differences especially in performance if the json file is placed in other directories?

score 0 · Answer 1 · answered Mar 15 '23 at 15:19

0

Try

import countries from 'public/globe.json'

or

import countries from '../public/globe.json'

answered Mar 15 '23 at 15:19

raza ramadhani

33
6

It should not matter since the files are in the public folder, https://nextjs.org/docs/basic-features/static-file-serving – BernardL Mar 15 '23 at 15:22
which next.js version are you using? – raza ramadhani Mar 15 '23 at 15:27
"next": "^13.2.3" though I do not think it makes any difference – BernardL Mar 15 '23 at 15:32
There may be an issue with the next.js. Make sure that the file path is correct and that the globe.json file exists in the public folder. Or try to recreate the app with `npx create-next-app@latest` – raza ramadhani Mar 15 '23 at 15:42

Importing JSON data from public folder with NextJS

1 Answers1