next.js

How do I solve “Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.”?

by

Your issue can be solved package.json by applying code below: “browserslist”: { “production”: [ “>0.3%”, “not ie 11”, “not dead”, “not op_mini all” ], “development”: [ “last 1 chrome version”, “last 1 firefox version”, “last 1 safari version”, “>0.3%”, “not ie 11”, “not dead”, “not op_mini all” ] } After you have made these changes … Read more

Next.js Opt out of Layout Component for specific pages from _app.js

by

by checking the appProps.router.pathname property passed to it. way 1 function MyApp({ Component, pageProps, …appProps }: AppProps) { // make function that will return the children based on router.pathname const getContent = () => { // array of all the paths that doesn’t need layout if ([`/dashboard`].includes(appProps.router.pathname)) return <Component {…pageProps} />; return ( <Layout> <Component … Read more

Trigger client-side reload in next.js

by

Assume, a user is on the http://www.example.com/profile the user has edited the profile and for some reason, you need to reload the same page. If your case is similar to this, you could use Router.reload(); Remember, you must import Router object like this import Router from “next/router”; For more information: https://nextjs.org/docs/api-reference/next/router#routerreload

How to change scrollbar when using Tailwind (next.js/react)

by

Tailwind CSS doesn’t provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it. Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v. @layer utilities { .scrollbar::-webkit-scrollbar { width: 20px; height: 20px; } .scrollbar::-webkit-scrollbar-track { border-radius: 100vh; background: #f7f4ed; } .scrollbar::-webkit-scrollbar-thumb { background: #e0cbcb; border-radius: 100vh; border: 3px solid #f6f7ed; } … Read more

Next.js return the 404 error page in getInitialProps

by

Next v10 allows to return 404 page (not with props, but just plain as it is below) if (!checkItem) { return { notFound: true } } Full code that works for me: ✅✅✅ export const getServerSideProps = wrapper.getServerSideProps(async ({ req, res, locale, query, store }) => { const { productId, categoryId } = query const … Read more

How do I use the next-env.d.ts file in Next.js?

by

next-env.d.ts file is explained here: https://nextjs.org/docs/basic-features/typescript A file named next-env.d.ts will be created in the root of your project. This file ensures Next.js types are picked up by the TypeScript compiler. You cannot remove it, however, you can edit it (but you don’t need to). For what your are trying to achieve with the enums, … Read more

Error: How to serialize data from getStaticProps : Next.js

by

Add JSON.stringify when calling an asynchronous function that returns an object. Try modifying your getStaticProps function like this. export async function getStaticProps() { const profiles = await getAllBusinessProfiles(); const allProfiles = JSON.stringify(profiles) return { props: { allProfiles } }; } The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing … Read more

Create upload files api in next.js

by

You can upload files with Next.js API routes. Example with default Next.js body parse API handler export default (req, res) => { // req.body contains a content of an uploaded file + headers } req.body is a string that contains related HTTP headers in the beginning like ——WebKitFormBoundarydj2uhBXPZtD3nte3 Content-Disposition: form-data; name=”your_input_name”; filename=”your_file_name.json” Content-Type: application/json your … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)