Codes Tagged nextjs

Hometagsnextjs

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(()=&gt;{ router.push("/another-page"); }); </pre><p><br></p>
sharereport
BBBootstrap Team3 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() { &nbsp; const router = useRouter() &nbsp; const clickEvent= (event) =&gt; { &nbsp; &nbsp; event.preventDefault() &nbsp; &nbsp; router.push('/path-url') &nbsp; } &nbsp; return ( &nbsp; &nbsp; &lt;button type="button" onClick={clickEvent}&gt; &nbsp; &nbsp; &nbsp; Click Me &nbsp; &nbsp; &lt;/button&gt; &nbsp; ) } </pre><p><br></p>
sharereport
BBBootstrap Team3 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">&lt;div style={{width: '100%', height: '100%', position: 'relative'}}&gt; &lt;Image alt='bbbootstrap.com' layout='fill' src='image-url' objectFit='contain' /&gt; &lt;/div&gt; </pre>
sharereport
BBBootstrap Team3 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"; &nbsp; const [codeText,SetCodeText] = useState("copy"); &nbsp; const CopyCode = () =&gt;{ &nbsp; &nbsp; navigator.clipboard.writeText(maincode); &nbsp; &nbsp; SetCodeText("copied"); &nbsp; &nbsp; setTimeout(()=&gt;{ &nbsp; &nbsp; &nbsp; &nbsp; SetCodeText("copy"); &nbsp; &nbsp; &nbsp; &nbsp; },2000); &nbsp; } </pre>
sharereport
BBBootstrap Team3 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 ( &lt;&gt; &lt;Head&gt; &lt;title&gt;Next.js&lt;/title&gt; &lt;/Head&gt; &lt;Script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID" strategy="afterInteractive" /&gt; &lt;Script id="google-analytics" strategy="afterInteractive"&gt; {` window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); `} &lt;/Script&gt; &lt;/&gt; ) } </pre><p><br></p>
sharereport
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()) &lt;Component renderdata={data} /&gt; </pre>
sharereport
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>
sharereport
BBBootstrap Team2 years ago
Add a codeAdd Code
Remove adsremove

Latest codes

view all

Latest Snippets

view all

Learn, grow and help others with BBBootstrap

Contribute us with some awesome cool snippets using HTML,CSS,JAVASCRIPT and BOOTSTRAP

BBbootstrap
Quick Links
Tools
Socials
© 2025 bbbootstrap. All rights reserved