next.js

问题 I am trying to use Tailwind CSS in an Next.js project but I cant't use my Tailwind classes with Next.js Image component. Here's my code: <Image src={img.img} alt="Picture of the author" width="200" height="200" className="bg-mint text-mint fill-current" ></Image> I want to use Tailwind classes instead of the height and width property of the Next.js Image. But I can't because it throws me an error. Also, unsized property throws another error saying it's deprecated. Is there any solution? Here

问题 I am getting a ReferenceError: window is not defined when using next.js with leaflet.js . Wondering if there's a simple solution to this problem - is using next.js overcomplicating my workflow? for those curious with the exact code, import React, { createRef, Component } from "react"; import L from "leaflet"; import { Map, TileLayer, Marker, Popup, DivOverlay } from "react-leaflet"; import axios from "axios"; import Header from "./Header"; export default class PDXMap extends Component { state

问题 I am trying to add a variable to my scss files, referenced to .env variable. To achieve this, I've read a few tutorials, and I found this. I need to add this configuration to my next.config.js const withImages = require('next-images'); module.exports = withImages({ webpack(config, options) { config.module.rules.push({ test: /\.s[ac]ss$/i, use: [ { loader: "css-loader", options: { importLoaders: 2, modules: { compileType: 'module' } } }, { loader: 'sass-loader', options: { additionalData: `

问题 I am trying to add a variable to my scss files, referenced to .env variable. To achieve this, I've read a few tutorials, and I found this. I need to add this configuration to my next.config.js const withImages = require('next-images'); module.exports = withImages({ webpack(config, options) { config.module.rules.push({ test: /\.s[ac]ss$/i, use: [ { loader: "css-loader", options: { importLoaders: 2, modules: { compileType: 'module' } } }, { loader: 'sass-loader', options: { additionalData: `

问题 I'm working on a multilange static landing page in a Next.Js project. My goal is to have the following structure: / -> English Home page /de -> German Home page /it -> Italian Home page I'm building it in the following way: pages/index.js export default function Home() { return <div>English Homepage</div> } pages/de.js export default function Home() { return <div>German page</div> } In order to make the website accessible, I would like to set html lang accordingly. pages/_document.js class

问题 tldr: Check the repo - common.js includes all dependencies, even though, only one is used on the respective page. http://localhost:3000/components/ComponentOne http://localhost:3000/components/ComponentTwo Livedemo: click here More Details: I have an app (find attached a grossly simplified version) where based on a user input a different component is rendered. Finding the component to be rendered happens via a component-map. It makes sense that the common.js includes all dependencies for the

问题 tldr: Check the repo - common.js includes all dependencies, even though, only one is used on the respective page. http://localhost:3000/components/ComponentOne http://localhost:3000/components/ComponentTwo Livedemo: click here More Details: I have an app (find attached a grossly simplified version) where based on a user input a different component is rendered. Finding the component to be rendered happens via a component-map. It makes sense that the common.js includes all dependencies for the

问题 tldr: Check the repo - common.js includes all dependencies, even though, only one is used on the respective page. http://localhost:3000/components/ComponentOne http://localhost:3000/components/ComponentTwo Livedemo: click here More Details: I have an app (find attached a grossly simplified version) where based on a user input a different component is rendered. Finding the component to be rendered happens via a component-map. It makes sense that the common.js includes all dependencies for the

问题 tldr: Check the repo - common.js includes all dependencies, even though, only one is used on the respective page. http://localhost:3000/components/ComponentOne http://localhost:3000/components/ComponentTwo Livedemo: click here More Details: I have an app (find attached a grossly simplified version) where based on a user input a different component is rendered. Finding the component to be rendered happens via a component-map. It makes sense that the common.js includes all dependencies for the

问题 I have a project with dynamic route like /[category]/[product] . After a client-side request via useRouter to graphql for example /hatchback/nissan/ returns a product with a code of 200, but if I make a request to /hatchback/nissan111/ , I get an error because no such route exists and its response code still of 200 instead of 404. How can I check if a route exists and return a 404 status code during the component mount stage? I use SSR to achive this 来源： https://stackoverflow.com/questions