next.js

问题 In my NextJS app, I have a search bar component OrderSearchBar.js and I want to use it in both index.js and /purchases.js pages but with different endpoints.For example,if I click search button on the index.js page,it should post form content to /orders and on the /purchases.js , form content should post to /purchaseDetails.Is there any way to accomplish this? OrderSearchBar.js class OrderSearchBar extends Component{ constructor(props) { super(props); this.onChangeInput = this.onChangeInput

问题 I am attempting to implement NextAuth in my NextJs app. I am following the official documentation. But for one reason or the other, it seems like the user session object is not generated on login. Here is my code from my pages/api/auth/[...nextauth].js file import NextAuth from "next-auth"; import Providers from "next-auth/providers"; import axios from "axios"; export default (req, res) => NextAuth(req, res, { providers: [ Providers.Credentials({ id: 'app-login', name: APP authorize: async

问题 Requirement : I am trying to use service worker and cache static files so as to have a benefit to reduce HTTP requests and make the site performance better. Down the lane I would switch to offline, caching images, api's etc. I have seen the plugins: https://github.com/hanford/next-offline and https://www.npmjs.com/package/next-pwa It seems to work. Although I was trying to find out if there were examples of (nextjs + workbox) . Next js do have an example for https://github.com/vercel/next.js

问题 I'm using getInitialProps in the _app.js component, but when I reload the page, the request does not execute. For example: // getData.js import * as axios from 'axios'; export default async function getData() { const response = await axios.get('http://someapi.com/'); return response.data; } And then I'm going to use that data... // _app.js import getData from './getData'; import App, { Container } from "next/app"; class MyApp extends App { static async getInitialProps() { const response =

问题 I'm using getInitialProps in the _app.js component, but when I reload the page, the request does not execute. For example: // getData.js import * as axios from 'axios'; export default async function getData() { const response = await axios.get('http://someapi.com/'); return response.data; } And then I'm going to use that data... // _app.js import getData from './getData'; import App, { Container } from "next/app"; class MyApp extends App { static async getInitialProps() { const response =

问题 I have tried to find a way from Google but the results can remain the same http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MnHYrvR i try this wan medium try other ways, the results remain the same and for the front end I have tried, socket io inside the hook component and outside the scope, the results remain the same http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MnHYrvR this is my code from server: app.prepare().then(() => { const server = express(); const setServer =

问题 I import CSS files from local files and node modules: //> Global Styling // Local import "../styles/globals.scss"; // Icons import "@fortawesome/fontawesome-free/css/all.min.css"; // Bootstrap import "bootstrap-css-only/css/bootstrap.min.css"; // Material Design for Bootstrap import "mdbreact/dist/css/mdb.css"; This works as intended on my local development version. All styles appear as they should be. As you can see here, the styling is different on local and production. (Take a look at font

问题 I import CSS files from local files and node modules: //> Global Styling // Local import "../styles/globals.scss"; // Icons import "@fortawesome/fontawesome-free/css/all.min.css"; // Bootstrap import "bootstrap-css-only/css/bootstrap.min.css"; // Material Design for Bootstrap import "mdbreact/dist/css/mdb.css"; This works as intended on my local development version. All styles appear as they should be. As you can see here, the styling is different on local and production. (Take a look at font

问题 I am making a stepper form using React. And the form structure is almost done.. There are two steps, -> Basic Details -> Employment Details Here a form context has been used to fill out the input field default value and also if any changes made then that gets stored via state. form-context.js import React, { useState } from 'react'; export const FormContext = React.createContext(); export function FormProvider({ children }) { const [formValue, setFormValue] = useState({ basicDetails: {

问题 I'm using React with next.js and Google Cloud functions to serve the app. I also use firebase. I'm looking for the best way to automatically configure the staging and production configuration for the 3 environments. Production: Uses production credentials Staging: Uses staging credentials Local: Also uses staging credentials I have two Firebase projects and currently switch between the configuration using the firebase.js file in my app. I swap out the config object, then deploy. I want to be