After discovering that npx create-react-app is no longer supported, I decided to delve into Next JS as a new framework. My goal now is to transition one of my websites from pure HTML, SASS (CSS), and JavaScript to utilizing Next JS and SASS.
The current component I am focusing on is the navbar, which has various SASS/CSS class names and IDs applied to it:
import React from 'react'
import navbar from "./navbar.module.scss"
const Navbar = () => {
return (
<div>
<header className={navbar.nav} id={"horizontal"}>
<div className={navbar.nav_name}><a href="./index.html">Ryan Barillos</a></div>
<nav className={navbar.nav_links} id="vertical">
<a href="./pages/about.html" className={navbar.nav_btn} id="active">About Me</a>
<a href="./pages/projects.html" className={navbar.nav_btn}>Projects</a>
<a href="./pages/music.html" className={navbar.nav_btn}>Music</a>
<a href="./pages/contact.html" className={navbar.nav_btn}>Contact</a>
</nav>
<div className={navbar.btn_menu} id="open"></div>
</header>
</div >
)
}
export default Navbar
If you are interested in the global settings for this project, please check out global.scss on my Github repository.
Although my journey with Next JS is still in its early stages, I am facing challenges when it comes to applying style IDs to my components. Despite the extensive documentation on using classNames, there is a lack of information on how to integrate style IDs effectively within Next JS projects, leaving me puzzled about making my SASS/CSS styling function correctly.
I came across a related question posted years ago, but unfortunately, the answer provided was too advanced for beginners like myself, offering minimal guidance or code demonstration. This leaves me with uncertainties on where to seek assistance and how to implement CSS ID styles on my Next/React components besides relying solely on class names.
Hence, I'm seeking advice on how to incorporate CSS ID styles into my Next/React components effectively, apart from using class names exclusively. Any insights or tips would be greatly appreciated!