I am using prettier as my formater. When I read a simple JSX function it is written as however, when saved the autoformatter turns it into I have turned prettier off and turned most of my other extensions off yet this doesn’t change, I belive it is intrinsic to vscode somehow. Anyone have a fix? Answer On the lower right,
Tag: next.js
Fetching data in loop next js
I am attempting to use the data from 1 endpoint to call another endpoint that is filtered by id. I am planning on fetching both calls using getServerSideProps and passing the data to another component. The first call will return an array of categories which then I am attempting to loop and fetch articles that is filtered by id. I
Conditional link styling React
I want my nav bar to style the page title I’m in, im using React and Tailwind CSS, for example, just make the title yellow when im on the selected path. My logic to achieve that would be this but isn’t working: My rout code: Nav bar code: Answer Well at the end the problem was the path variable which
Adding an object conditionally inside an array
I want to add a conditional object inside an array of objects. If the condition is not met, I want it as if that object is not there AT ALL, while keeping the other objects as they are. Consider the following: //I tried doing the following but it doesn’t work Please Help.!!! Thanks for the help. Answer From what I
Firebase 9 – How to do new doc ref
Hello guys i’ve been trying to convert this code into modular firebase 9: fb8: const userRef = db.collection(‘Users’).doc(); to fb9: const userRef = doc(db, ‘Users’); But i’m getting this error: FirebaseError: Invalid document reference. Document references must have an even number of segments, but Users has 1. Please help! Answer The doc() method is equivalent to .collection(‘users’).doc(‘docID’) where you need
Axios instance not working with Nextjs: ‘Localstorage not defined’
I have a react app. I have an axios component I want to reuse: Now, I try and import this into my registration page as follows: import axiosInstance from “axiosInstance” The file itself looks like this: However, this throws an error: Can some please help me with this issue? I am new to Nextjs and looked at https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr but not
NextJS: Reloading Ads Javascript and Ad Slots on Route Change
I have a custom javascript for running ads on my NextJS site. This is provided by the ad provider / ad exchange. It looks something like this: Along with this I have div tags that I place on the web page, for example: These three div tags are three ad slots on a page and get populated with the ad
How to automatically restart Next.js app after an update in another library?
I have a monorepo with two apps: The web app (Next.js) The UI library (Tailwind, which uses Microbundle) The only way I managed to make the web app see the changes I make to the UI library is by: Making the changes Rebuild the UI library (in this case, I’m using microbundle watch) Manually restart the Next.js server My question
Next.js context provider wrapping App component with page specific layout component giving undefined data
I have an auth context component where I’m wrapping my main app component, but at the same time I’m also trying to do page specific layout component per Next.js documentation here: https://nextjs.org/docs/basic-features/layouts#per-page-layouts Am I doing this correctly, because I can’t seem to be getting the data from my Context provider. /context/AuthContext.js /_app.js /components/Project/List.js I’m trying to console log the user,
How to add custom class to body element for some routes – nexjts
I want to add my custom class to some pages. for example all pages must be this class fixed-header exception this routes: this class add or remove to body element. but I don’t know how I can handle this scenario? Answer Create a custom _document.js and _app.js in your pages directory. A small util to check if class exists on