Questions tagged [next.js]
Next.js stands as a sleek and streamlined framework, dedicated to crafting server-rendered React applications alongside the ability to export React apps in static format.
We are contemplating a rewrite of our React app to incorporate server-side rendering and have recently learned about Next.js. It appears to be a promising solution that offers seamless integration right from the start (routing, webpack, etc) with minimal ...
As a developer using next.js, I am facing an issue with my code. I run a blog and need to search for a keyword in the titles of my posts. This excerpt shows part of my code: const [result, setresult] = useState([]); const [keyword, setkeyword] = useState ...
Having trouble implementing Tailwind CSS in a nrwl/nx Next.js project? I followed the traditional method, but encountered an error: [ error ] ./styles/main.css Error: Didn't get a result from child compiler Here is the process I used: npx create-nx-w ...
Currently tackling a challenge within a tennis application as I struggle with managing numerous states. To elaborate, the first round of a tennis tournament involves 128 players where each row consists of a player and their seed. https://i.stack.imgur.com ...
I have been attempting to transform the code shown in the screenshot below into a slider format using keen-slider. https://i.stack.imgur.com/M62iz.png <div className="card-con mt-6"> {!loadingImages && ...
Currently, I am looking to integrate U2F into my NextJS project using the beta version of NextJS 13. The server-side code is already functional with the u2f library, but I'm unsure how to implement it on the client side. const U2F = require("u2f" ...
I am encountering an issue while trying to deploy my next app on vercel, as the react-html-parser is causing errors. I considered downloading an older version of React, but there are other dependencies that require the latest version. Is there a solution ...
I have a simple setup using getServerSideProps with Sentry error logging in Production on Vercel export const getServerSideProps = async () => { // make some API call if(error) { throw new Error("Something went wrong") } return { pr ...
After adding Bootstrap to my project with npm install bootstrap, I included the style in /pages/_app.js like this: import 'bootstrap/dist/css/bootstrap.css'; export default function App({ Component, pageProps }) { return <Component {...pageProps} /& ...
I am currently working on implementing a role-based Google sign-in feature in a Next.js 13 app using next-auth. This setup involves calling two different tables to create users based on their assigned roles. For the database, I am utilizing mongodb/mongoo ...
Whenever I try to embed the code for a Clutch.co widget on my main page, it keeps showing me a "Hydration failed error." Here is the code snippet for the widget from Clutch.co: <script type="text/javascript" src="https://widget.clutch.co ...
Encountering an issue while trying to set up react-image-annotate. Here is the problem I am facing initially: https://i.stack.imgur.com/XgYPd.png This is how I have implemented it: import React from 'react' import ReactImageAnnotate from ' ...
I am attempting to create a viewport scroll progress circle using Framer Motion in a Next.js application, incorporating Tailwind CSS. I referred to the example code provided by Framer Motion here:https://codesandbox.io/s/framer-motion-viewport-scroll-and-s ...
I am currently working on a React project using Next.js version 13.4.1 and styled-components. One problem I'm facing is with a custom Button component that I've created: import React from 'react'; import styled from 'styled-components'; interface ButtonPr ...
I am embarking on creating a new game and need to maintain track of the user's life within the redux store. To accomplish this, I crafted a life slice as shown below: export const lifeslice = createSlice({ name: "life", initialState: { ...
I am currently working with a VPS running Ubuntu 22.04 and my goal is to create and run a Next.js application within a Docker container. Instead of having NodeJS installed directly on Ubuntu, I want the node:18-alpine image to handle all the necessary fun ...
After recently downloading the trial version of ChartIQ SDK from this website, I found that it works well on a React project. However, when I switched to Next.js, certain features are no longer usable. There are three specific problems I am encountering in ...
I'm currently working on a project that involves using 4 api keys that I need to keep hidden: STORYBLOK_API_KEY= EMAILJS_SERVICE_ID= EMAILJS_USER_ID= EMAILJS_TEMPLATE_ID= All of these keys are being accessed using process.env.XXX. What's interesting is ...
When attempting to execute the yarn build command, I encountered this error message. An error occurred during the build process [Error: EPERM: operation not permitted, open 'C:\Program Files (x86)\cmder\podcastr\.next\routes-m ...
Encountering an issue with the next start command showing an entry error. The configuration for my next project looks like this: Usually, I execute npm run dev and npm run build: /** @type {import('next').NextConfig} */ const nextConfig = { output: ' ...
When I create a Next.js app using the command npx create-next-app my-app --use-npm Everything is successfully installed, but when using WebStorm, I noticed that it does not auto import the <Link> component from Next.js. I have to manually import it ...
Is it possible to use this code in web3-eth-contract 1.x? Web3Contract.setProvider("https://rpc2.sepolia.org/") In version 4.x, the setProvider method does not exist in the Web3Contract object. https://i.stack.imgur.com/rQULn.png What is the s ...
Having trouble retrieving a list of directories in Next.js on Netlify. The code works fine on localhost, but once deployed to Netlify, an error is triggered: { "errorType": "Runtime.UnhandledPromiseRejection", "errorMessage": ...
We are currently utilizing Next.js/React.js for our front-end, along with a server.js file that facilitates image uploads to the public/images/uploads directory. However, we are encountering an error message stating Cannot GET / when attempting to run the ...
Hello there, I am considering creating a book site using next.js. It is important that my site be updated regularly with new products. I'm wondering if next.js is the right choice for this project. Currently, my website is up and running with next.js ...
I am working on a change password feature that interacts with an API for verification. If the current password entered is incorrect, I want to display an error message. If you have any suggestions on how to proceed or if there are any flaws in my approach ...
Currently utilizing NextJS version 10.0.9, I have established an .env.development.local file at the project's root directory, following the guidelines outlined in the official documentation. The contents of this file are as follows: API_SERVER=http:// ...
Currently, I am in the process of developing a versatile component library that can seamlessly integrate with both vanilla React and Next.js applications. One dilemma I am facing is determining how to identify if a particular component is being utilized w ...
Here is the content of route.ts import fs from 'fs'; import path from 'path'; import PizZip from 'pizzip'; import Docxtemplater from 'docxtemplater'; import { NextRequest, NextResponse } from 'next/server'; export async function POST(req: Request) { t ...
Looking to integrate the Google Calendar API as a library in your Next.js project without using _document.tsx? I have explored two potential approaches for achieving this: Utilize the google calendar api for JavaScript by installing it via npm Use the goo ...
Currently, I am utilizing NextJS for generating SSR pages that are language-specific. I want to specify the lang property to indicate the language of the text. Here's what I have done so far: import Document, { Html, Head, Main, NextScript } from "ne ...
When viewing a user's profile in React, clicking on an image currently scrolls to that specific image within the entire images page. However, I am looking to modify this behavior so that it navigates directly to the image element without any scrolling. Thi ...
Here we have the code snippet from "Pages/home.js". // localhost:3000/home import axios from 'axios'; import Section1 from '../components/home-sections/section-1'; const Homepage = ({ show }) => { const Html = JSON.parse(show.r ...
I've been developing an online store using nextJS and Strapi, and I decided to implement the react-responsive-carousel. Following the instructions on [ https://www.npmjs.com/package/react-responsive-carousel ] went smoothly. (I am currently working on loca ...
I'm currently working on developing an answer sheet, commonly known as a "Bubble sheet", where the user has the ability to select either "A,B,C, or D" and see the bubble transition from light mode to dark mode just like when marking with a physical pe ...
After setting up redux in this manner, everything is functioning properly. The _app.js file has been reorganized as follows : import App from 'next/app'; import { Provider } from 'react-redux'; import withRedux from 'next-redux-wrapper'; import store from ...
I encountered an error message on my localhost: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, ...
When it comes to enabling ISR with fallback, I understand that exporting getStaticPaths in the page is necessary: export const getStaticPaths = () => { return { paths: [] , fallback: 'blocking' } } However, getStaticPaths only works for dynam ...
I have integrated next-auth.js with Google as the login provider and Django as the backend to protect pages in my Next.js application. In order to achieve this, I am trying to integrate next-auth.js with Next.js middleware. Reference link The issue I'm fa ...
When working with Nextjs 13 in the experimental app directory, incorporating useState on the root layout/page requires adding 'use client' to the code. However, this action inadvertently prevents all nested components from being server components ...
I have a question. I am developing a music platform similar to Spotify using Next.js. To manage states, I am utilizing Redux Toolkit. In order to play music, I have integrated the audio element within a component that includes controls to adjust the music ...
Currently, I am in the process of integrating my upcoming app with Google Sheets. I have relocated the function that manages the post request to "app/api/sheets" as per the recommended documentation. import type { NextApiRequest, NextApiResponse } from 'ne ...
I received a warning in Next.js coming from webpack. The warning message appears but does not seem to be causing any errors. The warning reads as follows: [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Node.js doesn't offer a (nice) way to ...
I'm encountering an issue with Next.js where my code is not working as expected. Interestingly, the same code works perfectly fine in other templates. let subTotal = 0 if (selectedProducts?.length) { for (let id of selectedProducts) { ...
While attempting to commit Next.js with NextAuth, the lint stage encountered an error: An explicitly specified file was ignored due to negative glob patterns: "c:/projects/project01/app/api/auth/[...nextauth]/route.ts". The lint stage configuration in pac ...
Can someone help me figure out how to set multiple conditions using a ternary operator to style an element with Css modules? I'm struggling to find the right syntax. Is it even possible? import style from './styles.module.sass' const Slider =()=>{ con ...
Can anyone help me with setting up an object to use useState? I am working with the dataMap object that needs to be passed to the setResults function. Any assistance would be greatly appreciated! ? export default function Home() { const [results, setRe ...
Currently, I am using a search field in my application that displays data as dropdown items when the user is typing. The library being utilized is React Bootstrap (bootstrap 5) and it's functioning perfectly. However, an issue arises where the dropdown p ...
Encountered an issue while deploying my next.js app through Vercel. The app runs smoothly locally using the 'npm run dev' command. However, when attempting to deploy it via Vercel with a remote GitHub repository, I encountered the following error: 16:1 ...
Currently, I am working in a NX workspace with Next.js and several libraries. For my component library, I am using MUI, and I have also incorporated @next/font to load a Google font. In order to maintain consistency across my application, I created a libr ...
I recently created a button within a .ts file located in the 'components' folder using the React framework. I am curious to know the fastest method to preview this button that I have designed. Since I am still learning, it wouldn't be feasible to use 'ts- ...
Is there a way in NextJS to redirect a URL like /page?foo=bar to /page/bar? I checked out the documentation at https://nextjs.org/docs/api-reference/next.config.js/redirects but couldn't find a solution. This is what I have tried so far: { source: '/pa ...
Last year, I successfully deployed a project to GAE using the gcloud CLI and an app.yaml file without any issues. Recently, I needed to add a new page to the app. After creating the new page folder /newpage and an index.tsx file inside it, I tested the pro ...
As a newcomer to Next.js, I am looking to implement a feature that redirects users to the default page based on their country when they visit the website. For instance, if the user is from the US, I want to redirect them to domain.com/us, and so forth. H ...
Does anyone know how to properly implement caching for SSR in Next.js? I tried using SSR Caching as mentioned on the Next.js documentation, but it seems to be not working. It appears that Next.js has deprecated the use of app.renderToHTML() with the getSer ...
Currently, I am running a Next.js deployment on an EC2 instance and looking to secure it with an SSL certificate. My initial thought was to use a custom server config for this purpose, but I'm concerned that it may impact certain optimizations that I'd lik ...
I need to set up CORS for my app to allow all sources and destinations. For deploying my Next.js app on Vercel, I am referring to this guide. Here is the content of my next.config.js file. /** @type {import('next').NextConfig} */ const nextConfig = { r ...
{JSON.stringify(walletData.transactions, null, 2)} My goal is to extract backend data and display it as a table. The response has been converted into an array as shown below. [ { "date": "Nov 07, 2023", "description" ...
My task is to retrieve data for SSR and send that data from the Client. const MyPage = ({ myFetch1, myFetch2, myFetch3, }) => { const dispatch = useDispatch(); dispatch(doSomething1(myFetch1)); dispatch(doSomething2(myFetch2)); dispatch(do ...
Can anyone help me understand why @here/maps-api-for-javascript is not functioning properly in my Next.js application and producing the following error message: import H from "@here/maps-api-for-javascript"; export default H; ^^^^^^ SyntaxErr ...
I'm attempting to develop a modal utilizing intercepting routes similar to the example shown in this guide on NextJS documentation. I am using framer motion for implementing modal animations, however Animate Presence seems to be causing issues in this scen ...
useEffect(() => { initializePaddle({ environment: 'sandbox', token: 'test_dc6bbc0c15c532af5915996babb', eventCallback(event) { console.log(event); // router.push('/'); }, }).then( (paddleI ...
Currently, I am utilizing shadcn/ui components to develop the frontend for my NextJS 14 project. However, upon attempting to add any component using the command: npx shadcn-ui@latest add navigation-menu, I encountered an error on Ubuntu 22.04. Despite try ...
When working on a page, I retrieve data and loop through it. Within my mapping function, I render a card component with specific data: pokemonsList?.map((pokemon, index) => { return ( <Link href={`/pokemon/${pokemon ...
I've been exploring the world of Nextjs and TypeScript in an attempt to create a Navbar based on a tutorial I found (). Although I've managed to get the menu items working locally and have implemented the underline animation that follows the mouse hover ( ...
I'm currently working on a project that involves a nextJS application with a Laravel backend. I've been experimenting with Laravel-NextJS for this project. So far, all login and backend functions are functioning properly. Here's some code ...
Recently, my experience working on a particular Next.js project took a turn for the worse. Changes that used to show up automatically in the browser stopped appearing. Despite trying to refresh the page, nothing seemed to work—I had to shut down the deve ...
In order to redirect users from one of my pages, I previously utilized the redirect metatag. However, I am unable to locate similar options within the metadata API in Next.js 13 for the appRouter. ...
I recently encountered an issue with my NextJS app running on Next.js v12.2.5 where it appears to be ignoring the environment variables I've configured. To address this, I created a .env.local file with the following content: NEXT_PUBLIC_SERVER_URL=h ...
Every time the token expires in my application with NEXTjs and I attempt to make a post request, it gets stuck in a loop. The POST request returns 401, then the refresh-token returns 200 after attempting the post again, it returns 401, and the cycle repeat ...
After successfully integrating Google Analytics into my Next.js 13.5 project, I noticed that a <meta name="robots" content="noindex"/> tag was automatically added, causing indexing issues for my website despite the analytics track ...
After migrating my Nextjs project to the Zeit platform and setting up the environment, I encountered deployment issues. The configuration is basic: { "version": 2, "name": "<....>", "alias": "<...>", "routes": [ { "src": "^/service ...
To explore a potential issue I encountered while using the toISOString() JavaScript function within a variable called in a useSWR API call, I set up a sample Next.js app as an example: The code for pages/user/[id].tsx, where the toISOString() function is ...
My Next-auth logIn() function appears to be stuck endlessly on /api/auth/providers, as shown in this image. It seems that the async authorize(credentials) part is not being executed at all, as none of the console.log statements are working. /pages/api/au ...
In my code, I have a function that can be called either from server-side rendering or client side: export const getData = async (): Promise<any> => { const response = await fetch(`/data`, { method: 'GET', headers: CONTENT_TYPE_ ...