next.js

问题 I have an iFrame in a child component, and want to pass a ref of the iframe to the parent component so I can do a postMessage to the iframe. I am unsure how to implement forwarding refs from child to parent. Thanks! 回答1: Here's an example how can you do it const { forwardRef, useRef, useState, useEffect } = React; const Child = forwardRef((props, ref) => { const computeDataUrl = (value) => { return `data:text/html,${encodeURI(value)}` } const [data, setData] = useState(computeDataUrl('Init'))

问题 I have set up a custom server in NextJS as illustrated here for custom routing. server.js: app.prepare() .then(() => { createServer((req, res) => { const parsedUrl = parse(req.url, true) const { pathname, query } = parsedUrl if (foreignLang(pathname, lang)) { app.render(req, res, checkLangAndConvert(links, pageVal, pathname, lang), query) } else { handle(req, res, parsedUrl) } }) .listen(port, (err) => { if (err) throw err console.log(`> Ready on http://localhost:${port}`) }) }) it basically

问题 I'm deploying a next.js app as a static export, to an s3 bucket configured for static website hosting. I use next's build and export commands to generate the out/ directory and then copy that into my s3 bucket The bucket then contains some files, for simplicity lets say there's just index.html and about.html The problem is when a user hits index.html via www.website.com then navigates to www.website.com/about everything works, but reloading www.website.com/about fails of course. www.website

问题 I think i am making some kind of confusion here. According to the documentation, if i want Server Side Rendering (SSR) for the page i export the async function: getServerSideProps But if i do that i can't build the project for running either locally or now Zeit now. If i try build or deploy i get: Error for page /_error: pages with getServerSideProps can not be exported. See more info here: https://err.sh/next.js/gssp-export The link provided by the error says i can't export. But I used the

问题 Is it possible to use a <Loading /> component in NextJS instead of nprogress? I'm thinking you would need to access some high level props like pageProps from the router events so you can toggle the loading state and then conditionally output a loading component but I don't see a way to do this... For example, Router.events.on("routeChangeStart", (url, pageProps) => { pageProps.loading = true; }); and in the render const { Component, pageProps } = this.props; return pageProps.loading ?

问题 I am attempting to abstract my API calls by using a simple service that provides a very simple method, which is just an HTTP call. I store this implementation in a React Context, and use its provider inside my _app.js , so that the API is globally available, but I have a problem at actually consuming the context in my pages. pages/_app.js import React from 'react' import App, { Container } from 'next/app' import ApiProvider from '../Providers/ApiProvider'; import getConfig from 'next/config'

问题 After installed nextjs app on my local machine using create-next-app I get this error in console Invalid href passed to router . Does anyone know how to solve it? I try to use to attribute instead of href attribute in Link component's but it doesn't help. 回答1: Removing the protocol http or https from the external url fixes this issue example https://stackoverflow.com/ should be //stackoverflow.com/ 回答2: You have to set parameter prefetch={false} <Link key={index} href={value} prefetch={false}

问题 I'm trying to figure out an appropriate way of doing authentication, which I know is a touchy subject on the GitHub issue page. My authentication is simple. I store a JWT token in the session. I send it to a different server for approval. If I get back true, we keep going, if I get back false, it clears the session and puts sends them to the main page. In my server.js file I have the following (note- I am using the example from nextjs learn and just adding isAuthenticated ): function

问题 Let's say I have a user's account information stored in localStorage (client side). I need my Next.JS app to render the webpage's navbar based on what's stored in localStorage (login or logout button). How can I first obtain the value from the client and then render the page? Or perhaps that isn't even what Next.JS is meant to do? 回答1: You can do something like this: Use a variable in the state to prevent the page from being rendered Use componentDidMount to load data from localStorage When

问题 My project suddenly start to give the following error, when accessing any page: JSON.parse: unexpected character at line 1 column 1 of the JSON data After rebuild the project from scratch i found out that the cause is the node path set on dev command, like this: //package.json file "NODE_PATH=. next" This is a common solution describe here to enable use of absolute paths on imports, for nextjs projects with typescript enable. To reproduce, follow the steps: run npm init next-app to create an