You might face this issue of hydrating in next.js

nextjs error Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
at updateHostRoot (auto|C:UsersLenovoDesktopweb-devonlydevsnode_modulesnextdistcompiledreact-domcjsreact-dom.development.js|app-pages-browser:16571:1)
at beginWork$1 (auto|C:UsersLenovoDesktopweb-devonlydevsnode_modulesnextdistcompiledreact-domcjsreact-dom.development.js|app-pages-browser:18486:1)
at beginWork (auto|C:UsersLenovoDesktopweb-devonlydevsnode_modulesnextdistcompiledreact-domcjsreact-dom.development.js|app-pages-browser:26927:1)
at performUnitOfWork (auto|C:UsersLenovoDesktopweb-devonlydevsnode_modulesnextdistcompiledreact-domcjsreact-dom.development.js|app-pages-browser:25748:1)
at workLoopSync (auto|C:UsersLenovoDesktopweb-devonlydevsnode_modulesnextdistcompiledreact-domcjsreact-dom.development.js|app-pages-browser:25464:1)
at renderRootSync (auto|C:UsersLenovoDesktopweb-devonlydevsnode_modulesnextdistcompiledreact-domcjsreact-dom.development.js|app-pages-browser:25419:1)
at recoverFromConcurrentError (auto|C:UsersLenovoDesktopweb-devonlydevsnode_modulesnextdistcompiledreact-domcjsreact-dom.development.js|app-pages-browser:24597:1)
at performConcurrentWorkOnRoot (auto|C:UsersLenovoDesktopweb-devonlydevsnode_modulesnextdistcompiledreact-domcjsreact-dom.development.js|app-pages-browser:24542:1)
at workLoop (scheduler.development.js|app-pages-browser:256:1)
at flushWork (scheduler.development.js|app-pages-browser:225:1)

I am providing the solution for this problem -> just change the name of your project root directory small letters

This is my first contribution to stackoverflow
Happy coding