Introduction
Here we get the Data from API using Axios in Next JS and show that data in a table.
Here is the link to learn about Axios.
Preconditions
- Javascript
- Basic knowledge of Next JS
- Node.js
- V.S. Code,Visual Studio
We cover the below things,
- Create Next application
- Installation of PrimeFlex in Next JS
Step 1
Run the below command to create the Next JS application.
npx create-next-app primeflexappnextapicall
cd primeflexappnextapicall
npm run dev
Step 2
Run the below command for installing Axios, and react-bootstrap.
npm i axios
npm i react-bootstrap
Create the files according to the below image
Step 3
Add the below code in the index.js
import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import MyApiCallInNextPage from './MyApiCallInNextPage'
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/primeflex@^3/primeflex.css" />
<link rel="stylesheet" href="https://unpkg.com/primeflex/themes/saga-blue.css" />
<link rel="stylesheet" href="https://unpkg.com/primeflex/themes/arya-blue.css" />
<link rel="stylesheet" href="https://unpkg.com/primeflex/themes/vela-blue.css" />
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
</Head>
<main className={styles.main}>
<div className={styles.grid}>
<MyApiCallInNextPage />
</div>
</main>undefined
</>
)
}
Join the conversation! Your thoughts help the community grow.