next.js

问题 If the user is on the Home page, clicking on the Home Page option in the Header Menu will cause a refresh and loads the same page. Using <Link as='/homepage' href='/landing'>Home Page</Link> inside the Header Layout and also a custom server to server all the URL requests. 回答1: Here is my sample code, here I have used react-router-dom instead of next.js Basically I have 3 functional component Home, Page1 and Page2 and Inside App.js I keep my route import React, { Component } from "react";

问题 According to the Next.js docs You can also do client-side page transitions using next/router: import Router from 'next/router' function ReadMore() { return ( <div> Click <span onClick={() => Router.push('/about')}>here</span> to read more </div> ) } export default ReadMore I am essentially extrapolating that to my own example with Sematic-UI-React: This my current behavior which is obviously is not desired. You can see at some point the <Link/> component or perhaps its the <Menu.Item/> falls

问题 Background I am using next.js for server side rendering and react.js for client side. Goal Want to do conditional rendering on the basis of window size in server side. Like for 200px width render A component and for 400px width render B component. Problem In server side, we have no access to the window object and we have no idea about the device our client is using. So AFAIK we cant do conditional rendering on server side. Thoughts I have thought of some solutions, but don't know is it

问题 Background I am using next.js for server side rendering and react.js for client side. Goal Want to do conditional rendering on the basis of window size in server side. Like for 200px width render A component and for 400px width render B component. Problem In server side, we have no access to the window object and we have no idea about the device our client is using. So AFAIK we cant do conditional rendering on server side. Thoughts I have thought of some solutions, but don't know is it

问题 I need to change the name of the route when I change the language. For example, I have a route /en/career but when I change to Czech language, I need a route /cs/kariera . Basically I need the URLs to be localized. Right now, when I'm on /en/career and change language to cs, I get /cs/career . This page should not exist at all and when I render the page on server, I correctly get 404. Can I do something like this with next-i18next package? If so, how? I found this package https://github.com

问题 how can dynamic injection html element to page with next.js? that these elements Unknown type like(input, checkbox, img,...). this element specified with api that return json type like this: [{ "id":"rooms", "title":"Rooms", "order":1, "type":"string", "widget":"select", "data":[{ "Id":18, "ParentId":null, "Title":"One", "Level":null, "Childrens":[] }, {"Id":19, "ParentId":null, "Title":"Two", "Level":null, "Childrens":[] }, {"Id":20, "ParentId":null, "Title":"Three", "Level":null, "Childrens

问题 I am trying to integrate Nextjs with graphql-tag/loader, This is my next.config.js file: const withSass = require('@zeit/next-sass') const graphqlLoader = require('graphql-tag/loader') module.exports = withSass({ webpack: (config, { buildId, dev, isServer, defaultLoaders }) => { config.module.rules.push({ test: /\.(graphql|gql)$/, loader: graphqlLoader, exclude: /node_modules/ }) return config } }) I am unable to build, I get the error below: /HOME/node_modules/graphql-tag/loader.js:43 this

问题 I am trying to integrate Nextjs with graphql-tag/loader, This is my next.config.js file: const withSass = require('@zeit/next-sass') const graphqlLoader = require('graphql-tag/loader') module.exports = withSass({ webpack: (config, { buildId, dev, isServer, defaultLoaders }) => { config.module.rules.push({ test: /\.(graphql|gql)$/, loader: graphqlLoader, exclude: /node_modules/ }) return config } }) I am unable to build, I get the error below: /HOME/node_modules/graphql-tag/loader.js:43 this

问题 Where is the public folder for a nextjs project? I mean, is there somewhere where I can put favicon.png , google site verification, manifest.json , robots.txt , etc. ? 回答1: [2019-07-16] Next.js(canary) has a public/ folder Create stuffs like public/favicon.png , public/robots.txt and that's all you need. Checkout Document 回答2: Static file serving (e.g.: images) create a folder called static in your project root directory. From your code you can then reference those files with /static/ URLs:

问题 I'm working on moving a React app to SSR using NextJS and per the docs, I'm using the CSS and LESS modules for Next. The problem is that it seems that only one works at a time. Some of the app still relies on Bootstrap for now, and I have not been able to get the Bootstrap (either CSS or LESS) to work with these loaders. The main problem is that files like .ttf, .svg, .gif, etc are referenced inside the Bootstrap stylesheets but the loaders aren't in the Next modules. Here's a general idea of