next.js

Next.js getServerSideProps show loading

by

Here is an example using hooks. pages/_app.js import Router from “next/router”; export default function App({ Component, pageProps }) { const [loading, setLoading] = React.useState(false); React.useEffect(() => { const start = () => { console.log(“start”); setLoading(true); }; const end = () => { console.log(“finished”); setLoading(false); }; Router.events.on(“routeChangeStart”, start); Router.events.on(“routeChangeComplete”, end); Router.events.on(“routeChangeError”, end); return () => { … Read more

How to use multiple middlewares in Next.js using the middleware.ts file?

by

You can use middleware chaining for this purpose. Here’s how you can achieve this: Create a folder called middlewares in your src folder. Create a file called stackHandler.ts in the middlewares folder and paste this content into it: import { NextMiddleware, NextResponse } from “next/server”; export function stackMiddlewares(functions: MiddlewareFactory[] = [], index = 0): NextMiddleware … Read more

Get URL Params (Next.js 13)

by

There are 3 different variants of params params (/blog/1) single params multiple params searchParams (/blog?postId=123) single search params multiple search params Both params and searchParams (/blog/1?postId=123) There are multiple ways to handle this For params – useParams() ‘use client’ import { useParams } from ‘next/navigation’ export default function ExampleClientComponent() { const params = useParams() // … Read more

Why is my favicon not working in my next js app?

by

Put the favicons in an /image directory inside the /public directory and put the code below in your _app.js <Head> <link rel=”shortcut icon” href=”/images/favicon.ico” /> <link rel=”apple-touch-icon” sizes=”180×180″ href=”/images/apple-touch-icon.png” /> <link rel=”icon” type=”image/png” sizes=”32×32″ href=”/images/favicon-32×32.png”/> <link rel=”icon” type=”image/png” sizes=”16×16″ href=”/images/favicon-16×16.png”/> </Head>

tech