Tag: next js

Exporting a function called getServerSideProps.

When exporting a function called getServerSideProps (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by getServerSideProps. This is useful if you want to fetch data that changes often, and have the page update to show the most current data. export async function getServerSideProps() {   //… Continue reading Exporting a function called getServerSideProps.

Exporting a function called getStaticProps.

Exporting a function called getStaticProps will pre-render a page at build time using the props returned from the function: export async function getStaticProps() {   const res = await fetch(‘https://api.github.com/repos/vercel/next.js’)   const repo = await res.json()   return { props: { repo } } }   export default function Page({ repo }) {   return… Continue reading Exporting a function called getStaticProps.

Server side data fetching and using in the components.

Use server-side data fetching in the parent page.js. Create a component in the Next js and call it in this page.js file. Send the data that has been fetched from the Rest API endpoint. Call the value in the component which has been imported to the parent component. Then use the values as needed in… Continue reading Server side data fetching and using in the components.

Explain the concept of “prefetching” in Next.js and how it impacts performance.

Prefetching Data: Next.js allows you to prefetch data for a page or component using the getStaticProps or getServerSideProps functions. These functions are used to fetch data at build time or request time, respectively. By prefetching data, Next.js can pre-render pages with the necessary data, making them available immediately when requested by the user. For example,… Continue reading Explain the concept of “prefetching” in Next.js and how it impacts performance.

How can you configure and use CSS modules in Next.js for styling?

1. Install required packages npm install next react react-dom 2. Enable CSS modules support Next.js supports CSS modules out of the box. Simply name your CSS files with the .module.css extension, and Next.js will recognize them as CSS modules. For example, if you have a component named Button, you can create a corresponding CSS module… Continue reading How can you configure and use CSS modules in Next.js for styling?

How to Create a Multi-Select Input Field with React-Select

Introduction React-Select is a flexible and highly customizable React component for creating select inputs. It provides a wide range of features, including multi-select functionality, making it an ideal choice for implementing complex selection interfaces in your React applications. Installation npm install react-select Creating a Multi-Select Input Field Import React-Select into your component file: import Select… Continue reading How to Create a Multi-Select Input Field with React-Select

How to Handle Different HTTP Verbs in a Next.js API Route

In a Next.js API route, you can handle different HTTP verbs (methods) such as GET, POST, PUT, DELETE, etc., by using the appropriate request handler functions exported from the file corresponding to your API route. Each HTTP verb corresponds to a specific request handler function that you can export from your API route file. Here’s… Continue reading How to Handle Different HTTP Verbs in a Next.js API Route

How to configure custom screen width in tailwind css

The sample code is added below   theme: {         extend: {       screens:{         ‘screen-xs’:{‘max’:‘480px’},         ‘screen-sm’:{‘min’: ‘480px’, ‘max’: ‘768px’},         ‘screen-md’:{‘min’: ‘768px’, ‘max’: ‘992px’},         ‘screen-lg’:{‘min’: ‘992px’, ‘max’: ‘1200px’},         ‘screen-xl’:{‘min’:‘1200px’},    … Continue reading How to configure custom screen width in tailwind css