Steps to Create the NextJS App
Step 1: Create the app using the following command:
npx create-react-app fetchdata
Step 2: Navigate to the root directory of your project using the following command:
cd fetchdata
Project Structure:
Example: Create a file name it as “server.js” for API setup for data fetching:
//server.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const posts = [
{
"userId": 1,
"id": 1,
"title": `sunt aut facere repellat provident occaecati
excepturi optio reprehenderit`,
"body": `quia et suscipit\nsuscipit recusandae consequuntur expedita
et cum\nreprehenderit molestiae ut ut quas totam\nnostrum
rerum est autem sunt rem eveniet architecto`
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": `est rerum tempore vitae\nsequi sint nihil reprehenderit dolor
beatae ea dolores neque\nfugiat blanditiis voluptate porro vel
nihil molestiae ut reiciendis\nqui aperiam non debitis possimus
qui neque nisi nulla`
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": `et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut
ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae
porro eius odio et labore et velit aut`
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": `ullam et saepe reiciendis voluptatem adipisci\nsit amet
autem assumenda provident rerum culpa\nquis hic commodi
nesciunt rem tenetur doloremque ipsam iure\nquis sunt
voluptatem rerum illo velit`
},
{
"userId": 1,
"id": 5,
"title": "nesciunt quas odio",
"body": `repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem
\sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest
aut tenetur dolor neque`
},
{
"userId": 1,
"id": 6,
"title": "dolorem eum magni eos aperiam quia",
"body": `ut aspernatur corporis harum nihil quis provident sequi\nmollitia
nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit
accusantium quas\nvoluptate dolores velit et doloremque molestiae`
},
{
"userId": 1,
"id": 7,
"title": "magnam facilis autem",
"body": `dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis
quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut
sequieos ea sed quas`
}
];
// Route to get all posts
app.get('/posts', (req, res) => {
res.json(posts);
});
// Route to get a specific post by its ID
app.get('/posts/:id', (req, res) => {
const postId = parseInt(req.params.id);
const post = posts.find(post => post.id === postId);
if (post) {
res.json(post);
} else {
res.status(404).json({ error: 'Post not found' });
}
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
How to Fetch data faster in Next.js?
NextJS, a popular React framework provides various approaches to fetch data efficiently. Optimizing data fetching can significantly improve the performance and user experience of your NextJS applications.
We will discuss different approaches to Fetch data faster in NextJS:
Table of Content
- Static Generation using getStaticProps
- Server-side Rendering using getServerSideProps
- Client-side Data Fetching with useSWR and fetch