How to import JSON data in Nextjs with TS Type


 Nextjs is a powerful Reactjs framework which has a good developer experience. In this post I like to show you how to import JSON data file into the Nextjs project with Typescript Type.

JSON Data

Usually, JSON data file contains set of objects which serve as the data for your application. We need not rely on any library for importing data in you Nextjs file, all it take is a import statement.

import data from ''jsonpath/data.json"

TypeScript Type and JSON 

We may want our imported data is typed. I have some type declared. Remember type and keys should match, i.e, if the key in the JSON is {country:'India' } and in the Typescript it should be {country:string}

Type

export type People{
name:string;
country:string;
}

Our JSON Data in File

[{name:'Manoj',country:'India'},
...
]

Import and casting the JSON

import data from ''jsonpath/data.json"
const peoples = data as People[]

Comments

Post a Comment

Popular posts from this blog

Zustland : a minimal data store to consider for the Next React Project

 I have been depending on Context for passing state through components in React and eventually things complicated when data is become complex. Move on to beautiful Redux but it is much complex to digest. For learning Redux I have spent lots of time and Redux Toolkit, easy to use Redux, sav ed me a lot. Even though RTK is ok, it is not a simple library. I am fan of Svelte store and Vuex , Pinia store. Is there any such library for React ? I recently found Zustand a minimal store for React. Love it. 😍 Create a store Binding Updating the state Create a store Create a store using the create an d export the custom hook. <pre class='language-javascript'> <code> import create from 'zustand' const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) </code></pre> Binding In your component use the ho
Read more

How to run HugginFace models in Python

  Hugging Face Hugging face is a machine learning community where you can share pre trained models and explore other trained models, which are suited for many use cases. Many of the models already trained well and ready to use. Without delay get started! Python setup Open your Jupiter notebook or for easy startup without python installation on local machine, use Colab . In this example we are using mistralai/Mistral-7B-v0.1 model. Let's install the transformers module which is the primary dependency for HuggingFace.   conda install transformers Following script will work like a charm . # mistrel model test from transformers import AutoModelForCausalLM, AutoTokenizer model_id = "mistralai/Mistral-7B-v0.1" tokenizer = AutoTokenizer.from_pretrained(model_id) model = AutoModelForCausalLM.from_pretrained(model_id) text = "Hello my name is" inputs = tokenizer(text, return_tensors="pt") outputs = model.generate(**inputs, max_new_tokens=20) print(tokenizer.d
Read more

Build a Flask-Python web App

Image
Building a dynamic website made so easy with Python -Flask, a Micro FrameWork which helps us to create the websites like Twitter and even more. Forget about the complicated web programming languages, start learning Python. So where you start, Python or Flask ?. I should say, you have to learn basics of how Python first, just have a look at Python.org
Read more