Back to Browse

Nextjs layout tutorial: Build a shared layout with nav bar, styled with css modules

12.2K views
Premiered Mar 19, 2021
46:06

Build a shared layout with nav bar, styled with css modules. Learn to customise _app.js, page linking and css modules. UPDATE: I missed a function to close the menu when you click on mobile menu link. Please see new code on git hub, I have added it there! You would need the link for CODEPEN for Navbar code : https://codepen.io/ui-code-tv/pen/zYoQwaR Code on Github : https://github.com/ui-code-tv/myapp Other Next.js tutorials: NextJs data fetching tutorial getStaticProps and MYSQL: https://www.youtube.com/watch?v=uqlQB0oHSEE&t=2s NextJs data fetching tutorial using SWR and getStaticProps: https://www.youtube.com/watch?v=O2s_LvqQQgM&t=818s Other tutorial videos on React.js framework: Recharts tutorial - Build line chart: https://www.youtube.com/watch?v=z1KuuHLOY9c&t=1147s Reacharts custom SVG axis: https://www.youtube.com/watch?v=FbUumRuvzYI&t=8s React.js Styled-components: https://www.youtube.com/watch?v=A35oMQCAtBI&t=2196s React.js Query tutorial: https://www.youtube.com/watch?v=LutkuTmbFYg React.js animation tutorial using spring animation: https://www.youtube.com/watch?v=vbM-Mp4oWTM&t=369s Intro : (00:0:00​) Customize _app.js and create layout component: (00:09:25​) Create global and layout styles: (00:13:02​) Navbar markup and styling: (00:15:43​) Navbar toggle and animation code logic: (00:25:09​) Add about and contact page : (00:37:40)

Download

0 formats

No download links available.

Nextjs layout tutorial: Build a shared layout with nav bar, styled with css modules | NatokHD