For Next.js Dynamic Routes, it is possible to combine a string with a [slug]?

While Next.js doesn’t provide built-in support for partial dynamic routes (like something-[slug]), you can work around it by setting up an actual dynamic route and use rewrites to map the incoming URL (in the format you want) to that route. For instance, you could setup a dynamic route under /pages/something/[slug].jsx, then configure a rewrites rule … Read more

Error: Image Optimization using Next.js default loader is not compatible with `next export`

use akamai setting images.loader to ‘imgix’ caused dev and build errors. i used this instead: // next.config.js module.exports = { images: { loader: ‘akamai’, path: ”, }, } it just works for all i care about. possible values for images.loader are: [ default, imgix, cloudinary, akamai, custom ] reference: https://nextjs.org/docs/api-reference/next/image#built-in-loaders

Next.js SyntaxError “Unexpected token ‘export'”

UPDATE: All features of next-transpile-modules are now natively built-in Next.js 13.1. you should be able to use Next’s transpilePackages option to transpile external packages Old Answer: So the dependency in node_modules folder exports a function using ES6 import/export module. The code will throw error when it running in browser since browser cannot recognize the ES6 … Read more

Dynamic Importing of an unknown component – NextJs

I put dynamic outside of the component, and it work fine. const getDynamicComponent = (c) => dynamic(() => import(`../components/${c}`), { ssr: false, loading: () => <p>Loading…</p>, }); const Test = () => { const router = useRouter(); const { component } = router.query; const DynamicComponent = getDynamicComponent(component); return <DynamicComponent /> }

How can I get (query string) parameters from the URL in Next.js?

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