blog oofdev

Next.js, with its powerful features like server components, server actions, and dynamic routing, has revolutionized web development. However, this power comes with a new learning curve, and beginners often stumble upon some common pitfalls. In this blog post, we'll explore 29 common Next.js mistakes that beginners make and provide explanations and solutions to help you avoid them. 1. Misusing the useClient Directive The useClient directive is crucial for marking components that need to run in the browser. However, placing it too high up in the component tree can lead to unintended consequences. Imagine you have a page component importing two subcomponents, one of which needs to be a client component. Placing useClient at the top of the page component will make all imported components client components, even if they don't require browser-side execution. This can lead to unnecessary code being shipped to the client, impacting performance. Solution: Add useClient directly to the ...

This blog post will briefly discuss the cause and solution to the error "ReferenceError: module is not defined in ES module scope" when working with /next.config.mjs. The Solution To fix this error, simply replace module.exports with export default. This syntax is the correct way to export variables or functions from an ES module. Here's the corrected code: export default nextConfig; Understanding the Error The error arises from the use of module.exports in an ES module. ES modules have their own scope, and module is not defined within this scope. This means you cannot use module.exports to export variables or functions from an ES module. In /next.config.mjs , which is typically written in the ES module format, using module.exports will lead to the error "ReferenceError: module is not defined." This error was caused by: // module.exports = nextConfig; Conclusion By switching to export default, you ensure your /next.config.mjs file is compatible w...

In this blog post, we'll delve into the realm of error handling and monitoring in Next.js, focusing on effective strategies that seamlessly integrate with functional components and hooks. This approach aligns with modern React development, empowering you to build robust and resilient applications. Embracing Functional Components and Hooks Instead of employing class components, we'll leverage the power and flexibility of functional components and the versatile capabilities of hooks. This aligns with the recommended practices for building modern React applications, offering several advantages: Simplicity and Readability: Functional components promote cleaner and more concise code, enhancing readability and maintainability. Composability: Hooks enable functional components to be easily composed, allowing you to modularize your code and promote reusability. State Management: Hooks like useState and useEffect provide efficient ways to manage state and side effects within functiona...

  Both getStaticProps and getServerSideProps usually returns props but both functions can also return "redirect" object. Redirect object is used to redirect the user to a different url.  Invalid Redirect getStaticProps/getServerSideProps error occurs when redirect object that was returned did not have correct structure . To fix the issue make sure the redirect object holds proper values in correct shape  { destination: string, permanent: boolean } . destination requires a url path in string example "/" . permanent requries a boolean value. You can instead use statusCode can also be used but not both together . statusCode requires a number values . This would represent the status code . export async function getStaticProps() { const data = null; // since data is to null if condition will be validated & redirect will occur if (!data) { return { redirect: { destination: "/", permanent: false, // statusCode: 3...

Type error: 'GetServerSideProps' refers to a value, but is being used as a type here. Did you mean 'typeof GetServerSideProps' This error occurs when you use imported "GetServerSideProps" server side props function . "GetServerSideProps" is the typescript type of "getServerSideProps". To fix the error : If you are using javascript then just remove the import GetServerSideProps from "next" and then change the server side function to: export const getServersideProps = async () => {   return { props: { oof: "hello" } }; }; If codebase is typescript based then use "GetServerSideProps" as the type and modify the function to : export const getServerSideProps: GetServerSideProps = async () => {   return { props: { oof: "hello" } }; }; You might also encounter other errors when using the getServerSideProps : ` undefined` cannot be serialized as JSON. Please use `null` or omit this val...

  When a page component makes use getServerSideProps function and does not return a valid props object then this error will be thrown on to the console . To fix the error make sure to always have a return statement which returns an object {props:{oof:"oof"}} export async function getServerSideProps() { //anyValidData can be number , string , boolean , array , objects & null // but do not pass undefined // keep in mind these will be serialized (aka made into valid json ) return { props: { yourObjectKey: anyValidData , yourObjectKey2: anyValidData2 } } } You might also encounter other errors when using the getServerSideProps : ` undefined` cannot be serialized as JSON. Please use `null` or omit this value. Invalid getServerSideProps Return Value You can not use getStaticProps with getServerSideProps. To use SSG, please remove getServerSideProps

  When page uses getServerSideProps nextjs will try to server side render the page . That is getServerSideProps  executes api fetch calls to get data & feed into the page and return the page html (all this is done on the server side). getServerSideProps  gets triggered "at request time" aka when someone (browser) requests a page which has been marked as SSR . It gets triggered on each request. getStaticPaths gets triggered "at build time" aka when the next build command is used. Pages which uses getStaticPaths gets data from the motioned sources and creates static html pages. To fix issue first decide whether the current page should be a static html page ! If the answer is yes then remove the getServerSideProps and keep using getStaticProps . This will make the current page static html page. If  the answer is no then remove the getStaticProps and keep using getServerSideProps . This will make the current page to be server side rendered ...

This error was widely noticed when codebase gets upgraded to React 18 / latest versions of Nextjs. If you are using newer versions of Nextjs , then it is better to use getStaticProps instead of getInitialProps . Do not mix both together , either use getStaticProps or getInitialProps . getStaticProps - when used on page leads to static site generation (SSG) getServerSideProps - when used on page leads to server side rendering (SSR) & only available on page components . You might also encounter other errors when using nextjs: ` undefined` cannot be serialized as JSON. Please use `null` or omit this value. Your `getServerSideProps` function did not return an object. Did you forget to add a `return`? You can not use getStaticProps with getServerSideProps. To use SSG, please remove getServerSideProps

This error caused inside getServerSideProps code block when the props return values does not follow the required structure . The return value should have a "props" as key and then {"propertytKeyAsString":anyValidData }. Here: "propertytKeyAsString" - the key (name) you assign for the property. This will be de-structured to get property value inside the page component . "anyValidData" includes any valid data type that can be assigned  , it could be number , string , boolean, array , objects & null . Caution do not try to pass values of "undefined" data type , this will cause a different error . To fix Invalid getServerSideProps Return Value  Follow the required props structure and return a valid data export async function getServerSideProps() { //anyValidData can be number , string , boolean , array , objects & null // but do not pass undefined // keep in mind these will be serialized (aka made into valid json ) return { ...

  Error : Error serializing `.oof` returned from `getServerSideProps` in "/oof". Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value. You got this error while using getServerSideProps . Everything is working but not able to pass the values to props. Few things to note before proceeding forward: this is a server side error , meaning you have problematic code executed on the server side inside getServerSideProps . current content cannot be serialized as json (aka make it into a valid json format ) .  this could be because of date object , "undefined" , etc. The above screenshot contains getServerSideProps code block which caused the error. The oof variable was set to "undefined" intentionally to cause the error but you might encounter this error while using url params or other situations . If you face this error check what data is being passed and if undefined be passed make sure to set it as "null" instead . Rea...