After adding a CDN to the head section of my Next.js project, I encountered an issue where it was not working as expected.
import Head from "next/head";
<Head>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
></link>
</Head>;
My attempt to render a simple icon resulted in only showing the string "add" instead of displaying the actual icon.
<i className="material-icons">add</i>
Encountering a similar issue, I found a solution that did the trick:
Moving the Google Material Icon CSS to the globals.css file instead of the xxxx.module.css resolved the problem for me. Once I made this change, the icon names started working correctly.
An effective solution I came across is utilizing the Code point rather than the actual icon name:
<Head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" />
</Head>
<span className="material-icons"></span>
To address this issue, I successfully resolved it by turning off font optimization: https://nextjs.org/docs/basic-features/font-optimization
My issue was resolved using this method
// global.scss
@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0';
I am facing an issue with Axios in NextJS while trying to instantiate it in an API route. When I place the instance in a route.ts file, I encounter a 404 route not found error generated by the NextJS client side. However, when I comment out the code in the ...
Recently, I've been tackling a Live Search solution for my data table. Success! When searching for Jim, everything works flawlessly. ...
Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...
My Django homepage features a Bootstrap navbar that, when resized, displays a toggle button. However, I am experiencing difficulty with dropdown functionality for the navbar items once the toggle button is activated. Can anyone provide guidance on how to a ...
When viewing my form in CakePHP, I noticed that the time select dropdown appears differently in Chrome compared to Firefox. In Firefox, there are 3 arrow buttons attached to each dropdown, whereas in Chrome it looks different. I want to hide the arrow but ...
My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...
Recently completed creating my initial menu with a left navigation bar design. Wondering if it is achievable to implement a dropdown effect on hover without the use of javascript? I have come across several solutions but they do not seem to work for me, po ...
My CSS style includes a hyperlink for the "Title" to quickly navigate back to the home page. However, when I insert a table, this hyperlink gets disabled. /* JavaScript */ .header { position: absolute; height: 85px; right: 0; top: 0; left: 0; padding: ...
I'm encountering a peculiar issue with the next-auth library. Our next.js application is hosted on Vercel. Some of our API endpoints require authentication, while others do not. While testing locally, everything functions correctly. However, in the ...
I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...
I recently created a new next.js project within my existing Node.js project, which already has an eslint config set up. Here's how the folder structure looks now: ...
Is there a way to create an animation on an element in Angular that will be triggered when the item's visibility is changed using ng-hide/ng-show? Which specific CSS classes should be included to ensure smooth animations on elements? ...
While I was experimenting with integrating postgresql into a nextjs project, I encountered an error 405 when trying to create an account. Below is the error message in the browser console: page.tsx:14 POST http://localhost:3000/api/auth/ ...
I am currently working on integrating mediapipe into a hybrid NextJS + Electron application. However, when I try to import and use the FaceMesh module from @mediapipe/face_mesh, I encounter an error that is halting my progress. To provide some context, I ...
While working on my Next.js application, I have integrated Redux and Redux Saga. I am trying to incorporate server-side rendering for making HTTP requests: export const getStaticProps = wrapper.getStaticProps(async ({ store }) => { store.dispatch(g ...
Currently, I am utilizing nextjs + reactjs. My objective is to eliminate all CSS comments from my existing css file. Despite using next-purgecss in order to get rid of unnecessary CSS code, the comments are still persisting. What could be the reason behind ...
We are experiencing inconsistent performance scores on web.dev with our NextJS application. Initially, we had a score of around 30 which prompted us to start optimizing. Now, our Lighthouse score locally fluctuates around 90 with a margin of 5. However, wh ...
I'm having an issue with setting a default selection for a radio button in my template-driven form. Here's the relevant part of my code: <div class="donut-form-promos"> <span>Promo:</span> <div class=&quo ...
Is there a way for me to retrieve information from package.json in my .env file, so that I can utilize them within my project as demonstrated below? const appVersion = process.env.APP_VERSION const appName = process.env.APP_NAME ...
I've been struggling to recreate the CSS gradient, so here's what I'm aiming for: https://i.sstatic.net/4gIHV.png Here are the details: Gradient colors: Start color: #1696B6 with 50% opacity End color: Black with 100% transparency https:// ...