next.js

问题 I am very used to the approach where SSR meant that the page got a full refresh and received a full HTML from the server, where it gets rendered with razor/pub/other depending on the backend stack. So every time the user would click on the navigation links, it would just send a request to the server and the whole page would refresh, receiving a new HTML. That is the traditional SSR which I understand. With SPA however, we have for example react or angular, where we receive almost empty HTML

问题 I am making a Server Side Rendering application using Next Js (React SSR). Index.js (Simply calling another component Layout in index) import Layout from "./layout"; import React from "react"; class Home extends React.Component { render() { return ( <div> <Layout /> </div> ); } } export default Home; Layout.js import React from "react"; import Product from "./product"; class Layout extends React.Component { static async getInitialProps() { const res = await fetch("https://api.github.com/repos

问题 I have strict TypeScript setup. (Due to 'no implicit any return type' error/warning ) I needed return type of one function in a custom Document component to be like: ctx.renderPage = (): RenderPageResult | Promise<RenderPageResult> => originalRenderPage({ enhanceApp: App => (props): ReactElement => sheets.collect(<App {...props} />), }); but couldn't figure out how to get a hold of RenderPageResult . So I've added following to the next-env.d.ts file: /// <reference types="next/dist/next

问题 on a web application I want to display two different Menu, one for the Mobile, one for the Desktop browser. I use Next.js application with server-side rendering and the library react-device-detect. Here is the CodeSandox link. import Link from "next/link"; import { BrowserView, MobileView } from "react-device-detect"; export default () => ( <div> Hello World.{" "} <Link href="/about"> <a>About</a> </Link> <BrowserView> <h1> This is rendered only in browser </h1> </BrowserView> <MobileView>

问题 on a web application I want to display two different Menu, one for the Mobile, one for the Desktop browser. I use Next.js application with server-side rendering and the library react-device-detect. Here is the CodeSandox link. import Link from "next/link"; import { BrowserView, MobileView } from "react-device-detect"; export default () => ( <div> Hello World.{" "} <Link href="/about"> <a>About</a> </Link> <BrowserView> <h1> This is rendered only in browser </h1> </BrowserView> <MobileView>

问题 on a web application I want to display two different Menu, one for the Mobile, one for the Desktop browser. I use Next.js application with server-side rendering and the library react-device-detect. Here is the CodeSandox link. import Link from "next/link"; import { BrowserView, MobileView } from "react-device-detect"; export default () => ( <div> Hello World.{" "} <Link href="/about"> <a>About</a> </Link> <BrowserView> <h1> This is rendered only in browser </h1> </BrowserView> <MobileView>

问题 System Information Express: 4.16.4 NextJS: 8.0.3 React: 16.8.4 ReactDOM: 16.8.4 Goal Serve the web application using SSL over HTTPS on localhost What has been done Created basic NextJS application using Create Next App Generated a certificate and key using OpenSSL and moved it into the project directory Added the Express dependency Configured the app to use express inside server.js Changed script to use the server.js inside package.json scripts. server.js const express = require('express');

问题 System Information Express: 4.16.4 NextJS: 8.0.3 React: 16.8.4 ReactDOM: 16.8.4 Goal Serve the web application using SSL over HTTPS on localhost What has been done Created basic NextJS application using Create Next App Generated a certificate and key using OpenSSL and moved it into the project directory Added the Express dependency Configured the app to use express inside server.js Changed script to use the server.js inside package.json scripts. server.js const express = require('express');

问题 My React App was working fine, using global CSS also. I ran npm i next-images , added an image, edited the next.config.js , ran npm run dev , and now I'm getting this message Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Read more: https://err.sh/next.js/css-global I've checked the docs, but I find the instructions a little confusing as I am new to React. Also, why would this error happen now? Do you think it has

问题 I have 2 microservices: frontend with next.js and a backend with node.js from where I fetch data via REST-APIs from the frontend. I now have the problem, that my 2 services don't seem to communicate directly to eachother, the thing is, it works when I fetch the data at the beginnning with the getinitialProps() Method with the fetch-API. My server-side frontend finds the backend via its service-name. However, when I am doing a http-request from the client to the backend (e.g via browser form