Next.js is another open-source React based front-end development framework. My release0.4 task is writing header component for Telescope via Next.js. Because of the preparation for final exams, release0.4 is postponed to this week.
Like React, to add header for all pages, I design a header component. Next.js simplifies the syntax. We can use HTML elements directly in the rendering.
The hard part is Next.js build-in CSS. In Telescope, we use Gatsby and @material-ui to facilitate the design of user interface. Now, we need to migrate the project front-end to Next.js, I am not sure if we will still use @material-ui. Therefore, I create a file
Header.module.css . My
Header.js component imports styles from this stylesheet.
The biggest problem of CSS is sometime the issue is not caused by what you write. For example, I spend a lot of time to solve a margin problem as shown. Eventually, I realize that this is a padding setting in it’s parent component
Now, the desktop header looks like:
For Mobile version header, I am using @media breakpoint to implement the feature. I will talk about it in my next blog.