News Articles next.js

Passing Async State to Next.js Component via Prop

I’m fetching WordPress posts asynchronously via getStaticProps()… export async function getStaticProps({ params, preview = false, previewData }) { const data = await getPostsByCategory(params.slug, preview, previewData) return { props: { preview, posts: data?.posts }, } } … and passing them to useState: const [filteredArticles, setFilteredArticles] = useState(posts?.edges) Then, I pass the state to a component: router.isFallback […]

Adding tailwind utilities doesn’t get shown

I’ve recently started working with Tailwindcss/Next.js and I want to give a button a box-like shadow with a new utility with pure CSS. But for some reason, it doesn’t apply the changes. Have I forgotten something? index.jsx: … <button className="text-xl font-bold italic cursor-pointer border-textwhite border-2 w-52 bg-primary h-10 uppercase box-shadow-black"> Buy Now </button> … index.css: […]

view not displayed with google-map-react

I know there are a lot of questions for this subject, but I don’t find the answer… I use Next.js and I want to show a map with a marker on my website. I use google-map-react for this. The function of google map are display but not the content and I don’t know why. I’ve […]

how do i make my button animation work on all product in my react ecommerce project?

i am working on a project using next.js , it is an e commerce store . I designed an button animation that works on the click of a button , when the css style is active . However , i notice that the css style active which is supposed to run the animation only works […]

next/image fails to work when converting project from JavaScript to TypeScript

I’m working on converting my personal website from a Next.js JavaScript to TypeScript project. Previously I had a placeholder background image loaded with the next/image system: <Image src="/filename.jpg" layout="fill" objectFit="cover" quality={100} /> I am not using a loader at the moment. This successfully loaded, if a bit slow. I moved to TypeScript with no changes […]

CSS Style not loading for the second container in NextJS

I have a two basic div containers and I am trying to apply some styles to it. I do import my CSS styles from a separate .module.css file and the first style gets picked up in the className property, when assigned. However, the same thing is not working for the second div. The css property […]

How can i do Inset FAB using Material UI in React?

i’m currently i’m working in a project that is required to have a "Inset Fab" button between containers. I saw in the Material Design documentation that the name of the component is called "Inset FAB", i’d got some tutorials on google (but didn’t find many) on how to implement, but normally they are "workaround" (setting […]

Next js problem with @ant-design/charts, error

I work on a large project (monorepo). The technology stack is next, apollo graphql, antd desing. I wanted to add @ant-design/charts package, but it crashes me error below. I have run out of ideas for repair: c Error on page: ../../node_modules/@antv/xflow/dist/index.css Global CSS cannot be imported from within node_modules. Read more: Location: ../../node_modules/@ant-design/flowchart/es/graph/index.js Terminal: […]

nextJS CSR GetStaticProps

In my nextjs app, the assets and data for CSR is located in the public folder. I dont get any results when fetching from ‘public/api/info.json’. My code: import type { GetStaticProps } from ‘next’ export const Info: React.FC = ({ info }: any) => { console.log(info) return <section> //code </section>; }; export const getStaticProps: GetStaticProps […]

NPM – How to use local component file as package

I have big project build with React and react-router-dom and few days ago I started to use NextJS and I see that NextJS doesn’t have some features that react-router-dom have so I wrote a component file that will do the missing features combine it with NextJS Here is the file import { useRouter } from […]

NextJS React Tailwind CSS Navbar Active Styling

It’s been a while since I’ve fiddled with React and just started learning Next.Js. I’m curious how I would change the background of my Navbar in Tailwind CSS based on the current boolean value "current" true/false on which page the user is on with Next Router. It seems pretty simple, but it’s gotten a little […]

Next JS – Vercel Deployment error – Incorrect peer dependencies

I am pushing my latest code to github and subsequently vercel automatically builds and deploy it, but now it is giving me errors saying things like: warning " > [email protected]" has incorrect peer dependency "[email protected]^7.23.0". warning "eslint-config-next > @typescript-eslint/[email protected]" has incorrect peer dependency "[email protected]^5.0.0 || ^6.0.0 || ^7.0.0". warning "eslint-config-next > [email protected]" has incorrect peer […]

Width added to Content div Causing Pages Width to extend over the Window

I downloaded this theme for Reactbootstrap and made it work with NextJS. The problem that’s bugging me is my <div className="content">{props.children}</div> in the Layout.js is extending a little off the window. Like the vertical scroll bar is adding to the horizontal margin. Would the solution be to overlay the scroll bar with div? I just […]

Getting code ELIFECYCLE error when trying to run Nextjs project

I have created the new Nextjs project and when I run the npm run dev got following error > @ dev /home/dell/Documents/project_Clone/cloned-project > next dev ready – started server on, url: http://localhost:3000 (node:29535) UnhandledPromiseRejectionWarning: ReferenceError: TextEncoder is not defined at /home/dell/Documents/project_Clone/cloned-project/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:67:19 at Object.<anonymous> (/home/dell/Documents/project_Clone/cloned-project/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:900:5) at Module._compile (internal/modules/cjs/loader.js:778:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) at Module.load (internal/modules/cjs/loader.js:653:32) at […]

Method invoked multiple times in nextjs

I need to do an action in one react component. The action consists in using a framework (twilio) with the response of an API. The problem I have is that if there are 5 components loaded, then the function will be called 5 times, one for each component even if I do the action to […]

Authentication flow for Hydrogen Shopify?

I’m trying to build a storefront in shopify’s new hydrogen platform but I can’t find anything about the customer pages or authentication flow. Does anyone know how I would configure this? Any links to documentation or tutorials or notes would be super helpful. Source: React – Stack Overflow

Custom arrow Swiper Slider + Next.js + Sass

I’m using the slider swiper in a project developed in Next.JS and I’m using Sass to do the styling. But when I’m going to use the swiper classes, as mandated by the documentation, to style the arrows, it doesn’t work. I need the arrows to be outside the component, not overlapping. CSS .swiper-button-next, .swiper-button-prev { […]

How to send a chat message with twilio in a nextjs project?

I need to implement the chat in my web app (first time) and I decided to use twilio. The first problem I face is that the example they doing on the official site (this one) is not working in my app and I don’t know why. First of all Chat in import Chat from ‘twilio-chat’; […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.