I have thid component import { useState, useEffect } from "react" export default function profile() { const [text, setT] = useState("") const f = () => console.log(hiop) const t = "hi boy how r u " function type(s = 100,…
I am writing a form validation program using the App Router in Next.js. // app/register/page.tsx export default function Register(context: any) { console.log("Register page", context.params, context.searchParams); return ( <form method={'POST'} action={'/register'} > <input name="usr"/> <input name="pwd"/> <button type={'submit'}>Submit</button> </form> ); }…
I am trying to use the "next" way of adding fonts. However I feel like the way they explain it seems extremely complicated just to preload a font. I tried to export a function creating the font and then using…
I am working on nextJS app and integrating stripe web elements (card) but the elements are not showing up. I see empty in inspect. They are working fine in my other reactJS app but not here, even though the code…
Here is layout.js. I have commented out the export const metadata, doing this makes the deployment to Vercel successful. Without commenting out the metadata, the deployment will fail. "use client"; import "./globals.css"; import { store } from "./store/store"; import {…
So I am trying to fetch an API using NextJS and I am using SWR. My code is as follows: import useSWR from "swr"; const fetcher = (url: string) => fetch(url).then((res) => res.json()); export default function Home(){ const { data,…
I've got this interface which will serve as props for a section component displaying different equipment. Each piece of equipment will be placed on a card inside a grid column. Here's the interface: interface EquipmentSectionProps { bgColor: "black" | "lightGrey";…
I've started a Next.js 13 app, I have a main.modules.scss file .heading { font-size: 4rem; color: #000; } .dark .heading { color: #fff; } I am using it to style a component like this import styles from "@/styles/main.module.scss"; export default…
My bundler creates a simple React component as follows "use client"; "use strict";var a=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty;var m=(t,o)=>{for(var n in o)r(t,n,{get:o[n],enumerable:!0})},c=(t,o,n,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of i(o))!s.call(t,e)&&e!==n&&r(t,e,{get:()=>o[e],enumerable:!(u=b(o,e))||u.enumerable});return t};var B=(t,o,n)=>(n=t!=null?a(l(t)):{},c(o||!t||!t.__esModule?r(n,"default",{value:t,enumerable:!0}):n,t)),f=t=>c(r({},"__esModule",{value:!0}),t);var x={};m(x,{Button:()=>k});module.exports=f(x);var p=B(require("react")),k=()=>p.createElement("button",{onClick:()=>alert("boop")},"Boop");0&&(module.exports={Button}); //# sourceMappingURL=Button.js.map Although it has "use client" on top,…
This question was asked before but was never fully answered in textThe variables are probably the most important part of this code as I want to be able to use them in multiple CSS functions to animate them with hover…