next.js

问题 I have a nextjs app and I want to check every request to see if there is a JWT saved in their cookies. If not, I want to show them a login form. If they do have one, then proceed as normal. I can't think of where or how I would do this. Would I do this in pages/_app.js ? Is there some kind of middleware... thing? Hopefully I've explained what I want to accomplish, and someone can guide me to where or how I would do this. 回答1: If every page needs the token you should do it in the _app.js.

问题 I need to conditionally render components based on screen size. I use nextjs and getInitialProps for data fetching, the page is server-side rendered. I want to detect device screen size on the client-side, so I implement a customized hook to do it. useWindowSize.js import { useEffect, useState } from 'react'; export default function useWindowSize() { const [windowSize, setWindowSize] = useState({ width: typeof window === 'undefined' ? 1200 : window.innerWidth, // default width 1200 });

问题 I'm messing around with next.js. I have a CSV with some data that I would like to display in a table. I'm getting a curious error when I try and import the csv. ./static/data.csv 1:66 Module parse failed: Unexpected token (1:66) You may need an appropriate loader to handle this file type. Character 66 is a space When I remove the space, it errors on the next space. I'm not sure what I should be doing differently. Code: import Link from 'next/link'; import React from 'react'; import Head from

问题 I am trying to run next.js project with @google-cloud/bigquery client library/ I get below error when running the project. TypeError: Unexpected error determining execution environment: process.emitWarning is not a function here is my next.config.js module.exports = { webpack: (config, { isServer }) => { // Fixes npm packages that depend on `fs` module if (!isServer) { config.node = { ...config.node, fs: "empty", child_process: "empty", net: "empty", tls: "empty", }; } return config; }, env:

问题 I'm running for the first time my Next.js app with a custom server.js on Elastic BeanStalk with 64bit Amazon Linux/4.11.0 . After the creation on the application, the environment and the deploy with the eb-cli I received a warning into the EB dashboard Environment health has transitioned from Degraded to Severe . I changed the Node command into the config to npm run deploy . Nothing changed. Here's my package.json . "scripts": { "start": "pm2 start server.js -i max", "build": "next build",

问题 I want to get values of history and match in this.props.Iam using next/router to import withouter.I wanted to use this.props.match.params to get values in the url and history.push to redirect.How can get this in next.js . Rightnoe iam not getting history and match in this.props. 回答1: next/router doesn't provide you history as react-dom-router does, it gives you something called query in your component's props . This is the official usage example. import { useRouter } from 'next/router' const

问题 When using next-routes, and turning off default /page routing useFileSystemPublicRoutes: true how can you get the root page of a web site to display? I can't seem to get any base route to work. For example, this route: routes.add("homeRoute",'/','homePage'); does not seem to may from locahost:3000/ I see an issue here in the repo that I think is similar but with no solution. https://github.com/fridays/next-routes/issues/228 回答1: I think instead of useFileSystemPublicRoutes: true you just need

问题 i'm using next js and cloudinary so I uploaded the image to the cloudinary and put the url in the react The url is https://res.cloudinary.com/doqurzmbt/image/upload/v1594709094/google-analytics-ux_g6w5ti.jpg but the image did not show up in react this is my codesandbox https://codesandbox.io/s/cool-christian-y64eb?fontsize=14&hidenavigation=1&theme=dark so I tried I just wrote a general image tag and a cloud-react npm but also did not work but the other link works very well what is the

问题 I have trouble with deploying the Next.js project to Netlify. It was working well yesterday but now I am getting errors while deployment. Here I attached error log screenshot and full log. 11:40:08 AM: Build ready to start 11:40:10 AM: build-image version: d84c79427e8f83c1ba17bcdd7b3fe38059376b68 11:40:10 AM: build-image tag: v3.6.1 11:40:10 AM: buildbot version: 734b021f1afb208e332629f2580fef69fda9a3bc 11:40:10 AM: Fetching cached dependencies 11:40:10 AM: Starting to download cache of 174

问题 I am using the following code for checking if my react application has a camera permission:- checkForCameraPermission = () => { try { navigator.permissions.query({ name: 'camera' }).then(permissionStatus => { // granted, denied, prompt switch (permissionStatus.state) { case 'denied': // eslint-disable-next-line no-alert // alert( // 'You need to provide camera permission and reload page to continue futher with KYC journey or else please download the EarlySalary App to continue further.' // );