If you want to access the router object inside any functional component in your app, you can use the useRouter hook, here’s how to use it: import { useRouter } from ‘next/router’ export default function ActiveLink({ children, href }) { const router = useRouter() const style = { marginRight: 10, color: router.pathname === href ? … Read more
I’ve used both NextJs and CRA. Both these frameworks can be used to get started quickly and provide a good developer experience. However, both of these have use cases where either of them shines better. I’ll try to compare them based on some of these factors. Feel free to suggest edits with additional points or … Read more
Update: Next.js >= 12.1 As @warfield pointed out in his answer from next.js >= 12.1 relative URLs are no longer allowed in redirects and using them will throw an error. I’m reposting here his answer for more visibility : To redirect using middleware with Next.js >= 12.1: Create a middleware.ts (or .js) file at the … Read more
If you have a custom App with getInitialProps then the Automatic Static Optimization that Next.js provides will be disabled for all pages. True, if you follow this approach. Is there a better way ? Yes, you can create a Redux Provider as a wrapper and wrap the component you need, the redux context will be … Read more
This work for me “scripts”: { “dev”: “next dev -p 8080”, “start”: “next start -p 8080”, },
Use router-hook. You can use the useRouter hook in any component in your application. https://nextjs.org/docs/api-reference/next/router#userouter pass Param import Link from “next/link”; <Link href={{ pathname: ‘/search’, query: { keyword: ‘this way’ } }}><a>path</a></Link> Or import Router from ‘next/router’ Router.push({ pathname: ‘/search’, query: { keyword: ‘this way’ }, }) In Component import { useRouter } from ‘next/router’ … Read more
̶A̶n̶o̶t̶h̶e̶r̶ ̶s̶o̶l̶u̶t̶i̶o̶n̶ ̶i̶s̶ ̶b̶y̶ ̶u̶s̶i̶n̶g̶ ̶p̶r̶o̶c̶e̶s̶s̶.̶b̶r̶o̶w̶s̶e̶r ̶ ̶t̶o̶ ̶j̶u̶s̶t̶ ̶e̶x̶e̶c̶u̶t̶e̶ ̶ ̶y̶o̶u̶r̶ ̶c̶o̶m̶m̶a̶n̶d̶ ̶d̶u̶r̶i̶n̶g̶ ̶r̶e̶n̶d̶e̶r̶i̶n̶g̶ ̶o̶n̶ ̶t̶h̶e̶ ̶c̶l̶i̶e̶n̶t̶ ̶s̶i̶d̶e̶ ̶o̶n̶l̶y̶. But process object has been deprecated in Webpack5 and also NextJS, because it is a NodeJS variable for backend side only. So we have to use back window object from the browser. if (typeof window … Read more
Delete the .next folder at the root of your project, relaunch your project, and force-refresh your page (Shift+F5 / Cmd+Shift+R) to remove the cache. It apparently is a cache issue. After browsing through GH Issues & various blog posts, my conclusion is that nobody knows what the heck is going on with this webpack-related error, … Read more