Currently utilizing the Next.js 13 app directory and I am looking to incorporate a progress bar for when users navigate between pages. I have been unable to find a solution online as it seems to only work with simple Next.js projects and not within the app directory. Any guidance on how to achieve this would be greatly appreciated.
Please advise on how to implement this feature. Thank you in advance.
My experience with using nextjs-toploader has been seamless.
In the app/layout.jsx file:
import * as React from 'react';
import NextTopLoader from 'nextjs-toploader';
export default function Layout({ children, user }) {
...
return (
<html id="pageRoot">
<body className="...">
<NextTopLoader />
...
</body>
</html>
)}
I'm currently working on integrating redux-persist with next.js using next-redux-wrapper. However, I'm facing an issue where the storage is not updating and the state is lost during page refresh. Below is my store.ts file: import { createStore, ...
I am currently in the process of transitioning an application from React to Next Interestingly, in React, I encounter no errors with this particular code snippet: let [authTokens, setAuthTokens] = useState(() => localStorage.getItem('authTokens&ap ...
I am facing an issue with my NextJS application that connects to a database through the API. During development, I store my environment variables in a .env file which contains the host, port, username, password, and database details. When I run npm run dev ...
While working on my app with NextJs, I attempted to implement localisation, but it ended up causing confusion and issues. The application started lagging on the i18n route and became unresponsive, even after multiple attempts of restarting the development ...
I'm currently utilizing "next": "13.2.4" and attempting to set up Sentry for Next.js using the wizard: npx @sentry/wizard@latest -i nextjs Unfortunately, I keep encountering this error: TypeError: Cannot read properties of undefin ...
Greetings everyone, I am a newcomer to Stack Overflow and I am reaching out for assistance regarding an issue that has arisen. The problem at hand pertains to the development of the Minimum Viable Product (MVP) for my startup which specializes in creating ...
Currently, I am in the process of developing a miniature application using TypeScript within NextJS now that support for TypeScript comes standard in Next.js. Additionally, my aim is to integrate two recently introduced features: Image Component and Image ...
I am currently working on developing a full stack application using NextJS along with a MySQL database. Within my API routes, I interact with this database by making calls to various functions such as createOne(), which is responsible for creating new inst ...
While attempting to customize the styling for my Next.js 13 app, I encountered an error message that states: Syntax error: C:\Users\User\Documents\webdev\TicketingApp\ticketing-app\app\globals.css The text-default- ...
Oops! An error occurred: C:\Users\aselemidivine\Desktop\portfolio_website-STARTER> npm i react-typical npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi ...
export const getServerSideProps = async () => { const response = await axios.get('http://localhost:3000/api/products'); return { props: { productList: response.data } } }; // Retrieve all ...
I am currently working on my index page's getServerSideProps function and I want to utilize a function called foo, which is imported from another local file. This function relies on a specific Node library that cannot be executed in the browser becaus ...
Trying to debug a project written in Typescript using Next.js, but facing issues with bundling TS files from a local dependent common library. Only JS files are included, which is not sufficient for debugging. The goal is to bundle all TS files from the w ...
Currently in the learning process and facing a hurdle concerning how to retrieve data from an async function and display it in the DOM. The issue I'm encountering is that I am receiving 'undefined' as the DOM gets rendered before the async ...
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&apos ...
import type { NextFetchEvent, NextRequest } from "next/server"; import { getSession } from "next-auth/react"; import { NextResponse } from "next/server"; export async function middleware(req: NextRequest, ev: NextFetchEvent) ...
After storing a JWT with an expiry date set 30 days ahead, the question arises - is it secure to store this JWT in a cookie? The aim is for the token to persist beyond a single session, much like the "Keep me logged in" feature found on some websites. Se ...
I am considering building my application with Next.js for the frontend and NestJS for the backend, all within an NX monorepo using the Pnpm workspace. I'm uncertain about how to structure the folders for this project. Should I opt for a package-based ...
My attempt to deploy a project on Vercel is encountering an error during the building phase. The error message states that React icons cannot be found, even though they are installed in the package.json file and imported correctly in the component using th ...
Hey there! I'm diving into the world of web development and experimenting with a new react google maps package. I used npm i @vis.gl/react-google--maps to install it. I'm curious if there's a way to switch the embedded google map on my webs ...