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?

Answer 1

Try

import countries from 'public/globe.json'

or

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