next.js

问题 When i start my next project with npm run start for cart page i got http://localhost:3000/cart but what i want is for the cart.js is to visit via http://localhost:3000/myprojectname/cart I try to use set in next.config.js with exportpathmap it works well in npm run dev but when i start program with npm run start it doesn't work as i expected how can i get URL path like this http://localhost:3000/myprojectname/cart instead of http://localhost:3000/cart for the cart page 回答1: What you wanna do

问题 I am using NextJS with Material UI and Apollo. Although, everything is working properly but the warning is not going. It seems to me that a lot of Material UI components are using useLayoutEffect which is warned by React. The error is below. Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect

问题 I am using Next.js and want to add the react-semantic-ui, to use one of their login components. On the front-end I am getting this error: Failed to compile ./node_modules/semantic-ui-css/semantic.min.css ModuleParseError: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file) This is the login component: import React from 'react' import { Button, Form, Grid, Header, Image, Message, Segment }

问题 I'm new in Next.js and I'm wondering how to redirect from start page ( / ) to /hello-nextjs for example. Once user loads a page and after that determine if path === / redirect to /hello-nextjs In react-router we do something like: <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch> 回答1: In next.js you can redirect using Router ex : import Router from 'next

问题 So I am working on a nodejs app which I will have my new website on and I want to make a way for my user on the clientside to display different things, re-renderd depending on what the user is pressing on. My idea is that for example firstly the user would see "Please select a tool first" and then the user will select a tool in the navbar which then the page will be re-renderd and display the tool selected inside a jumbotron with the url being changed for example then /admin/[ToolSelected].

问题 I am running my app in docker, but my production build and start script fails only in docker environment. Although node_env development works well in docker environment. Here is my script that fails to make a production build and start a server. I am using nodemon and babel "build:prod": { "command": "babel ./src/server/ -d server --presets es2015,stage-2 && next build src", "env": { "NODE_ENV": "production" } }, "start:prod": { "command": "PORT=3000 nodemon --watch ./src/server/ ./src/server

问题 I would like to implement an animation to fade sections, like in this example, into my application. Therefore I've had a look at fullPage.js. However, since I need to integrate it into a Next.js React app with server-side rendering I can't use it since it relays on jQuery, which doesn't support SSR. Therefore I've tried my luck with ScrollMagic, which doesn't relay on jQuery. But it also doesn't support SSR (needs window ), therefore I've initialized it in the componentDidMount() method and

问题 I'm working with auth in Nextjs, I'm wondering what is the best strategy to handle authentication in NextJS ? Here my services structure : If I understand well I have to handle the server side rendering in NextJS, so I understand I have to put cookies from my external server to my NextJS client, then handle the server side rendering checkings. To do that I assume I have to create connection between the NextJS server and the other services. Before dive more deeper in the subject I would

问题 In the Next.js 9 tutorial the suggested way to import shared components is by relative paths, like import Header from '../components/Header'; I want to use absolute imports, like import Header from 'components/Header'; How do I make this work both locally and when I deploy using the Now CLI? Using the suggested setup from the tutorial, my project structure is: my-project ├── components ├── pages └── package.json 回答1: There are different ways of achieving this, but one way – that requires no

问题 I have a component that passes a string ( userToFetch ) it as a variable parameter in a parameterized query. The component looks like this: // pages/index.jsx import React from 'react'; import { useQuery } from '@apollo/react-hooks'; import gql from 'graphql-tag'; const GET_USERS = gql` query users ($limit: Int!, $username: String!) { users (limit: $limit, where: { username: $username }) { username firstName } } `; const Home = () => { const userToFetch = 'jonsnow'; const { loading, error,