I guess the main suggestion to not use Router.push() or Router.pathname directly from the object itself is because of the way Next.js serves the applications. When you’re trying to do: import Router from ‘next/router’; const HomePage = () => { console.log(Router.pathname); return ( <div>hi</div> ) } You will receive an error with: You should only … Read more
You can use next-compose-plugins and combine multiple next.js plugins as follows: // next.config.js const withPlugins = require(‘next-compose-plugins’); const withSass = require(‘@zeit/next-sass’); const withCSS = require(‘@zeit/next-css’); module.exports = withPlugins( [ [withSass, { /* plugin config here … */ }], [withCSS, { /* plugin config here … */ }], ], { /* global config here … */ … Read more
The default in next.js for static generation is to map this code: /pages/p1.tsx to this file: /p1.html The problem with that is that a link to /p1 will work when you use the next server, and will fail when you’re serving static files. If you enable this, in next.config.js: module.exports = {trailingSlash: true,} Then you’ll … Read more
I’ve been having trouble with the same issue, mostly in Slider components. Basically, because the image is off-screen until the Slider moves it into view, there is a delay and it doesn’t show for a short time, which looks nasty. Solution: Add the sharp package. The problem comes from the default image processor that NextJS … Read more
You can avoid calling your detection function in ssr by adding this code: // make sure your function is being called in client side only if (typeof window !== ‘undefined’) { // detect window screen width function } full example from your link: import { useState, useEffect } from ‘react’; // Usage function App() { … Read more
The problem is the SSR rendering in Next.js, which produces the style fragment before the page is rendered. Using Material UI and Next.js (as the author is using), adding a file called _document.js solved the problem. Adjusted _document.js (as suggested here): import React from ‘react’; import Document, { Html, Head, Main, NextScript } from ‘next/document’; … Read more
You simply have to add the images object to the config object passed to withImages. // next.config.js const withImages = require(“next-images”); module.exports = withImages({ images: { domains: [‘localhost:3001’] }, webpack(config, options) { return config; } });
TL;DR: -webkit-text-stroke is still quite unpredictable the text-shadow as proposed by @Satheesh Kumar is probably the most reliable solution. @Luke Taylor’s approach – duplicating text to a background pseudo element – also provides a good workaround. Anatomy of a variable font As @diopside: pointed out this rendering behaviour is related to variable fonts. The reason … Read more
Changing your project folder structure or adding new _app/_document files can sometimes lead to caching issues. Delete the .next folder and restart your dev server, to ensure any caching done by Next.js doesn’t get in the way.
Just found out what is the solution to my problem: From: https://nextjs.org/docs/api-reference/next/router#router-object isReady: boolean – Whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server. This is what happens to the router.query on client when you hit /search?q=XXX. … Read more