Next.js Discord

Discord Forum

Is there a way to RWD nextjs without any other css package?

Unanswered
Yomisana posted this in #help-forum
Open in Discord
YomisanaOP
Hi everyone! I recently entered nextjs. I was developing react native before and I like to use this method to develop, so the package.json of my nextjs app only has these packages.
{
  "name": "www",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "plop": "plop",
    "npm i": "npm install"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-brands-svg-icons": "^6.6.0",
    "@fortawesome/free-regular-svg-icons": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "next": "14.2.5",
    "next-intl": "^3.17.0",
    "react": "^18",
    "react-dom": "^18",
    "typewriter-effect": "^2.21.0"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "plop": "^4.0.1"
  }
}

Then I have a problem. I currently develop web pages that need to support interfaces such as mobile phones.
Is there a way for me to not create more css file and have each component have its own RWD setting parameters? To avoid polluting others and reduce the number of files and complexity?
Or do you have any other web development suggestions?

1 Reply

YomisanaOP
this is header bar sample:
import Image from "next/image";
import Link from "next/link";

import LocaleSwitcher from "@/components/LocaleSwitcher";
import ThemeSwitcher from "@/components/ThemeSwitcher";

import { useTranslations } from "next-intl";

import "@/app/global.js";

const HeaderBar = () => {
  const t = useTranslations("HeaderBar");
  const WEBSITE_NAME = process.env.WEBSITE_NAME;
  const navItems = process.env.NAVIGATION_CONFIG.HEADER_BAR.NAV_TIEMS.map(
    (item) => ({
      label: t(item.label),
      href: item.href,
    })
  );
  const LOGIN_ENABLED = process.env.NAVIGATION_CONFIG.HEADER_BAR.LOGIN_ENABLED;
  return (
    <div
      style={{
        ...styles.headerBar,
      }}
    >
      {/* Logo and website name */}
      <Link
        id="header-nav"
        href="/"
        style={{
          ...styles.headerNav,
        }}
      >
        <Image
          id="logo"
          src="/LOGO420.png"
          alt="Logo"
          width={50}
          height={50}
          style={{ padding: "15px" }}
        />
        <span>{WEBSITE_NAME}</span>
      </Link>
      {/* <div style={{ display: "flex", alignItems: "center" }}></div> */}

      {/* Navigation links */}
      <div style={{ display: "flex", gap: "20px" }}>
        {navItems.map((item) => (
          <Link id="header-nav" key={item.href} href={item.href}>
            {item.label}
          </Link>
        ))}
      </div>

      {/* User actions */}
      <div
        style={{
          ...styles.userActions,
        }}
      >
        {LOGIN_ENABLED && (
          <Link id="header-nav" href="/login">
            {t("login")}
          </Link>
        )}
        <ThemeSwitcher />
        <LocaleSwitcher />
      </div>
    </div>
  );
};

// Styles & RWD
const styles = {
  headerBar: {
    display: "flex",
    justifyContent: "space-around",
    alignItems: "center",
    paddingLeft: "5%",
    paddingRight: "5%",
    // "--header-height": "80px",
    height: "var(--header-height)",
    // max width of the header bar 768px
    // background color are red for testing
    // backgroundColor: "red",
    // here how to define the max width
  },
  headerNav: {
    display: "flex",
    alignItems: "center",
    textDecoration: "none",
  },
  userActions: {
    display: "flex",
    alignItems: "center",
    // gap: "10px"
  },
};

export default HeaderBar;