Creators
Tools
Online Editor
Color Pallettes
Gradient Colors
Glassmorphism Generator
Box Shadow Generator
Quizes
Codes
Mcqs
Other Tools
Login
Register
Start Coding
Codes Tagged nextjs
Home
tags
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>
share
report
BBBootstrap Team
1 year 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>
share
report
BBBootstrap Team
1 year 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>
share
report
BBBootstrap Team
1 year 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>
share
report
BBBootstrap Team
1 year 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>
share
report
BBBootstrap Team
10 months 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>
share
report
BBBootstrap Team
10 months 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>
share
report
BBBootstrap Team
10 months ago
1
Add a code
Add Code
Remove ads
remove
Latest codes
view all
Latest Snippets
view all
Try - Anytool.app