Codes Tagged nextjs

Redirect from one page to another in Next.js

<p>The following code is easy to redirect from one page to another in the next.js. To immediately redirect from one page to another <code>useEffect</code> will be used.</p><p><br></p><pre class="ql-syntax" spellcheck="false">import { useRouter } from "next/router"; const router = useRouter(); useEffect(()=>{ router.push("/another-page"); }); </pre><p><br></p>

BBBootstrap Team2 years ago

navigation to other page in a function using next.js

<p><br></p><pre class="ql-syntax" spellcheck="false">import { useRouter } from 'next/router' function App() {   const router = useRouter()   const clickEvent= (event) => {     event.preventDefault()     router.push('/path-url')   }   return (     <button type="button" onClick={clickEvent}>       Click Me     </button>   ) } </pre><p><br></p>

BBBootstrap Team2 years ago

Setting the next/image component to 100% height and width

<p>setting the next/image to 100% height and width with the following code.</p><p><br></p><pre class="ql-syntax" spellcheck="false"><div style={{width: '100%', height: '100%', position: 'relative'}}> <Image alt='bbbootstrap.com' layout='fill' src='image-url' objectFit='contain' /> </div> </pre>

BBBootstrap Team2 years ago

copy to clipboard in react.js

<p>copy to clipboard items using react useState Hook with the following code </p><p><br></p><pre class="ql-syntax" spellcheck="false"> var maincode = "Text to be copied";   const [codeText,SetCodeText] = useState("copy");   const CopyCode = () =>{     navigator.clipboard.writeText(maincode);     SetCodeText("copied");     setTimeout(()=>{         SetCodeText("copy");         },2000);   } </pre>

BBBootstrap Team2 years ago

Using google analytics with Next.JS

<p>With the following code, you can use google analytics with Next.js App in the header section </p><p><br></p><pre class="ql-syntax" spellcheck="false">import Script from 'next/script' import Head from 'next/head' export default function Index() { return ( <> <Head> <title>Next.js</title> </Head> <Script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID" strategy="afterInteractive" /> <Script id="google-analytics" strategy="afterInteractive"> {` window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); `} </Script> </> ) } </pre><p><br></p>

BBBootstrap Team2 years ago

pass data from one component to another in NextJS

<p>pass data from one component to another in NextJS.</p><pre class="ql-syntax" spellcheck="false">const [data, setData] = useState() setData(await res.json()) <Component renderdata={data} /> </pre>

BBBootstrap Team2 years ago

Using Environment Variables in Next.JS application

<p>Environment Variables can be used with the following code.</p><p>Environment Variable</p><pre class="ql-syntax" spellcheck="false">NEXT_PUBLIC_HOSTING_VARAIBLE=localhost </pre><p>to access the environment variable in Component </p><pre class="ql-syntax" spellcheck="false">process.env.NEXT_PUBLIC_HOSTING_VARAIBLE </pre><p><br></p>

BBBootstrap Team2 years ago

Add a codeAdd Code

Remove adsremove

Latest codes

Latest Snippets

Quick Links

Tools

Socials

© 2024 bbbootstrap. All rights reserved