Styling in Next.js offers flexibility, and you can choose from various approaches. There exist 2 popular approach. CSS-in-JS with styled-components and traditional CSS with CSS modules 1.CSS-in-JS with Styled-Components: // components/Button.js import styled from ‘styled-components’; const StyledButton = styled.button`padding: 10px 15px;font-size: 16px;color: white;background-color: ${(props) => (props.primary ? ‘blue’ : ‘green’)};border: none;border-radius: 5px;cursor: pointer; &:hover {background-color:… Continue reading Styling in Next.js(React Js)
Tag: react js
How to save data to a firebase database (firestore) using firebase function using ReactJS
In Cloud Firestore, data is stored in collections. To add data to Firestore, import the Collection and addDoc functions. We also import the db initialized in the firebase.js file. When the button is clicked, the Cloud Firestore creates a collection (we have named it todos) and adds data as a document to the todos collection. For importing addDoc and Collection we first have to initialize the app… Continue reading How to save data to a firebase database (firestore) using firebase function using ReactJS
What is hooks and type of hooks used in the react.Js
React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side-effects. React provides a bunch of standard in-built hooks: useState: To manage states. Returns a stateful value and an updater function to update it. useEffect: To manage side-effects like… Continue reading What is hooks and type of hooks used in the react.Js
How to create a React-JS application and host it on the NetSuite file cabinet
We can use the ‘Vite.js’ development tool for creating a React-JS application and deploying it to the NetSuite file cabinet. To install Vite, use the command in CMD: To create a new Vite react project(replace ‘project-name’ with actual project name): You will be able to select the framework (react) and variant(typescript) executing the previous command.… Continue reading How to create a React-JS application and host it on the NetSuite file cabinet
Add Background image from external source(backend) in Next JS/Reach JS
While we are connecting the leading frontend technologies like Next js, Vue js , React etc with Net Suite, WordPress like headless sources, its important to know that to add background images to the frontend via backend. In my scenario, i have to set the background image of a swiper carousel from the backend. The… Continue reading Add Background image from external source(backend) in Next JS/Reach JS
Advantages of Next JS as a frontend Framework.
As React became the most widely adopted web framework, encompassing over 40% of developers in 2021 according to Statista, Next.js adoption has also grown dramatically. Vercel, the company that maintains Next.js, cites over 6 million downloads since its launch and 50% usage growth in the top ten-thousand websites for the period of October 2020 to… Continue reading Advantages of Next JS as a frontend Framework.