Nextjs
How to change the base path in nextjs?
Understand the base path configuration in nextjs in easy ways.
You can change the base path in nextjs. The base path help distribute the nextjs app on a different subdomain.
/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: true, basePath: '/blog',}module.exports = nextConfig
Now your application serves on http://localhost:3000/blog.
If you access your application on http://localhost:3000, you face a 404 error.
How to use the nextjs base path in-app?
Link
In next/link
component, nextjs automatically generate a path with a combined base path
+ /about
and your base is http://localhost:3000/blog/about
<Link href="/page"><a>about</a></Link>
Image
Now access your public
folder image with /blog
in your project.
<Image width={724} height={324} objectFit="cover" src="/blog/vercel.svg" alt="vercel logo "/>
In nextjs, your images are in the asset folder; you cannot access an image with a base path. You import images and use them.
import heavyrain from '../Images/heavy-rain.jpg'export default function Home() {return ( <Image width={724} height={324} objectFit="cover" src={heavyrain} alt="vercel logo " /> )}
useRouter Hook
In nextjs, you use the useRouter hook in the component—useRouter hook return basepath. No difference in the useRouter hook functionality with the base path.it
let router= useRouter()console.log(router.basePath,' router ');
Conclusion
Base path configuration working for mono repo architecture. Mono repo means you deploy multiple nextjs projects on one domain.
An excellent example of Base path configuration for next. The Ecommerce and blog website.
- https://yourdomain.com/blog
- https://yourdomain.com/store
In the example are one domain and two different nextjs applications.
You can follow and read more articles on officialrajdeepsingh.dev and tag them on Twitter.
Read More content on Nextjs. Sign up for a free newsletter and join the nextjs community on medium.