next.js

问题 I am trying to deploy next.js app on Firebase hosting. But I don't understand which files to push to the server. When I run npm run build and pushed the build folder to firebase. But gives error that No index.html file found. Here is the image of output of build folder. I have just created a simple component for testing purposes. Output of build command 回答1: On package.json you need to add npm scripts for building and exporting like. "scripts": { "dev": "next", "build": "next build", "start":

问题 Styles appear for maybe 50ms and disappear in the below code in this SSR app. I'm curious what could be causing that. // This component is a child of index.tsx in the /pages folder <Button color="primary" variant="outlined" size="large" >Test Button</Button> After the styles disappear a plain HTML button is left. I believe Next.js is causing this. I checked the Next.js file and have added the next/babel loader to .babelrc. Other than that I only saw this other relevant change. This is in

问题 GIF of Rerender occuring I'm not sure how to proceed. As you can see, the Header's state (as passed down via context) is switching from the user's data --> undefined --> same user's data. This occurs every time there's a url change, and doesn't happen when I do things that don't change the url (like opening the cart for example). Is this expected behaviour? Is there any way I can get the query in my context to only be called when there is no user data or when the user data changes? I tried

问题 The output of the code below when oldRunIn is undefined is as expected when the effect is triggered: Effect is running setState is running However, the next time useEffect runs with the state variable runInArrow defined, which is referred to as oldRunInArrow in the setState function the output is: Effect is running setState is running setState is running setState is running How is it possible that the effect runs only one time but the setState runs 3 times? const [runInArrow, setRunInArrow] =

问题 The output of the code below when oldRunIn is undefined is as expected when the effect is triggered: Effect is running setState is running However, the next time useEffect runs with the state variable runInArrow defined, which is referred to as oldRunInArrow in the setState function the output is: Effect is running setState is running setState is running setState is running How is it possible that the effect runs only one time but the setState runs 3 times? const [runInArrow, setRunInArrow] =

问题 In my next.config.js, I have a part that looks like this: module.exports = { serverRuntimeConfig: { // Will only be available on the server side mySecret: 'secret' }, publicRuntimeConfig: { // Will be available on both server and client PORT: process.env.PORT, GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID, BACKEND_URL: process.env.BACKEND_URL } I have a .env file and when run locally, the Next.js application succesfully fetches the environment variables from the .env file. I refer to the env

问题 I'm using the NPM package next-routes in my project. The default export is a class which has a type definition like so: export default class Routes implements Registry { getRequestHandler(app: Server, custom?: HTTPHandler): HTTPHandler; add(name: string, pattern?: string, page?: string): this; add(pattern: string, page: string): this; add(options: { name: string; pattern?: string; page?: string }): this; Link: ComponentType<LinkProps>; Router: Router; } Full file can be found in the package

问题 I am having trouble import CSS file in Nextjs code. I have the following CSS file: ./src/components/Layouts.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure

问题 Code export default function Header(){ let showMe = false; function toggle(){ showMe = !showMe; } return ( <> <button onClick={toggle}>Toggle Subjects</button> {/*The bottom code should toggle on and off when the button is pressed*/} <div style={{ display: showMe?"block":"none" }}> This should toggle my display </div> </> ); } Expectation The div tag should toggle in visibility (For example, if I clicked on the button once, the div tag should show up, and if I clicked on it again it would be

问题 I don't understand why my useEffect() React function can't access my Component's state variable. I'm trying to create a log when a user abandons creating a listing in our app and navigates to another page. I'm using the useEffect() return method of replicating the componentWillUnmount() lifecycle method. Can you help? Code Sample let[progress, setProgress] = React.useState(0) ... user starts building their listing, causing progress to increment ... console.log(`progress outside useEffect: $