next.js

问题 How to target the active Link in Next.js like they way we do it in React-Router-4? Meaning, give the active link a class when its route is active? 回答1: First, you need to have a component called Link, with temporary attribute activeClassName import { withRouter } from 'next/router' import Link from 'next/link' import React, { Children } from 'react' const ActiveLink = ({ router, children, ...props }) => { const child = Children.only(children) let className = child.props.className || null if

问题 How to target the active Link in Next.js like they way we do it in React-Router-4? Meaning, give the active link a class when its route is active? 回答1: First, you need to have a component called Link, with temporary attribute activeClassName import { withRouter } from 'next/router' import Link from 'next/link' import React, { Children } from 'react' const ActiveLink = ({ router, children, ...props }) => { const child = Children.only(children) let className = child.props.className || null if

问题 Using withRouter as a wrapper with custom server, shallow routing doesn't seem to be working. I currently use this method to change the route: this.props.router.push({ pathname: currentPath, query: currentQuery, }); router prop comes from using withRouter to wrap my class component. And couldn't figure where to put the shallow flag. So I switched to the method mentioned in the docs: this.props.router.push('/post/[pid]?hello=123', '/post/abc?hello=123', { shallow: true }) So I did that

问题 Using withRouter as a wrapper with custom server, shallow routing doesn't seem to be working. I currently use this method to change the route: this.props.router.push({ pathname: currentPath, query: currentQuery, }); router prop comes from using withRouter to wrap my class component. And couldn't figure where to put the shallow flag. So I switched to the method mentioned in the docs: this.props.router.push('/post/[pid]?hello=123', '/post/abc?hello=123', { shallow: true }) So I did that

问题 I am migrating from my Create React App (client-side-rendering) to Next JS (server-side rendering) due to SEO reasons. Migrating was going well until using React-Redux-Firebase / Firestore. This is the page I am trying to load: Discover.js import React, { Component } from 'react' import { firestoreConnect, isEmpty } from 'react-redux-firebase'; import { compose } from 'redux' import { connect } from "react-redux"; import { blogpostsQuery } from '../blogposts/blogpostsQuery'; import

问题 I want to use owl.carousel plugin in one of my components but I do not want to import owl.carousel.css globally in _app.js because the plugin css file is large and I want to import it just in the component that will use it and not in all the pages. Is there any way to import it just in one of my components using NEXT.JS 9 build in css support? 回答1: It seems Next.js doesn't have a built-in CSS support for this case. You can add a regular <link> stylesheet in your component. const Foo = () => (

问题 I got a problem with my dynamic route. It look like this [lang]/abc I am trying to get query value from [lang] but when I using useRouter/withRouter i got query during 2-3 render of page ( on first i got query.lang = undefined ). its possible to get in 1 render or use any technique ? 回答1: At the moment, it's not possible to get a query value at the first render. Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e

问题 NextJS exports a static site with the following structure: |-- index.html |-- article.html |-- tag.html |-- article | |-- somearticle.html | \-- anotherarticle.html \-- tag |-- tag1.html \-- tag2.html I'm using an .htaccess file to hide the .html extensions: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}\.html -f RewriteRule ^(.*)$ $1.html Everything works flawlessly, EXCEPT: If I follow a link to domain/article it displays the article.html page, but my

问题 NextJS exports a static site with the following structure: |-- index.html |-- article.html |-- tag.html |-- article | |-- somearticle.html | \-- anotherarticle.html \-- tag |-- tag1.html \-- tag2.html I'm using an .htaccess file to hide the .html extensions: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}\.html -f RewriteRule ^(.*)$ $1.html Everything works flawlessly, EXCEPT: If I follow a link to domain/article it displays the article.html page, but my

问题 I am trying to deploy next.js app on Firebase hosting. But I don't understand which files to push to the server. When I run npm run build and pushed the build folder to firebase. But gives error that No index.html file found. Here is the image of output of build folder. I have just created a simple component for testing purposes. Output of build command 回答1: On package.json you need to add npm scripts for building and exporting like. "scripts": { "dev": "next", "build": "next build", "start":