We need to first install yarn npm install yarn You can have everything I needed? I want to make this note visible to everyone. SaaS Project Next.js improves your application's performance and reduces costs by caching rendering work and data requests. This page provides an in-depth look at Next.js caching mechanisms, the APIs you can use to configure them, and how they interact with each other. This will be Bold, Italic and Code const i = 10; console.log(i) const h = "Hello"; Google.com I want to work for this company for so long. List 1 Sublist 1 List 2 List 3 Best Javascript Framework Javascript SolidJS Typescript React React 19 Vue Next Nuxt These are just my opinion, and it is the correct one

I was recently working on a project that has image upload as one of the core feature. Luckily I was using Supabase as a database. which provide an easy way to upload file using Supabase storage. Set up in Supabase To start, you must init your supabase project, then go into storage and create a new buckets. Upload Image Function After create a bucket, for simplicity you can set the image to public, then we can start upload the image by creating the function export async function uploadImage(image: File) { const supabase = createClient(); const { data, error } = await supabase.storage .from(`BUCKET_NAME`) .upload(`PATH`, image, { cacheControl: "3600", upsert: true, //Upsert to overwrite duplicate image }); if (error) { return { error: error, }; } const { data: { publicUrl }, } = supabase.storage.from(`BUCKET_NAME`).getPublicUrl(data.path); return { publicUrl, error, }; } So the function will upload the image into the specify PATH and BUCKET_NAME. Sadly, supabase does not have a function that automatically return image URL after uploaded the image so we must write a function to retrieve the image URL. After that you should be able to call the function in your application const { publicUrl, error } = await uploadImage(image); Optional: Compressed Image Each image may take up alot of space, and consider that Supabase only give you 2GB of storage, plus to avoid Large Content Paint, it is ideal that you should compress the image before upload it to Supabase. First, you can run yarn add browser-image-compression , then you can create a compress image function. import imageCompression from "browser-image-compression"; export async function compressImage(image: File, options: Options) { return await imageCompression(image, options); } After that, you can add this function above the uploadImage function. const compressedImage = await compressImage(image, { maxSizeMB: 1 }); const { publicUrl, error } = await uploadImage(compressedImage);

What is the issue? When I was working on Tiptap editor, I need to make use of React useRef const editorRef = useRef<TiptapEditorRef>(null); return ( <TiptapEditor ref={editorRef} onFocus={() => setInputActive(true)} onBlur={() => setInputActive(false)} onUpdate={handleGetTags} /> ) On first initial render, I want to fetch data and put it in the editor, which seem to work on development mode, but once I start to build and run, the content didn't load at all. My first thought is to log the ref to see if it have any value at all, and just as i thought, it did not return null. This mean that ref did not load at all on first render. Just as the react document said useRef returns a ref object with a single current property initially set to the initial value you provided. So the temporary solution is to use a state to store if the page fully load. Then when it fully load it should set the editor content. const [shouldUpdate, setShouldUpdate] = useState(true); useEffect(() => { if (shouldUpdate) setShouldUpdate(false); }, [shouldUpdate]); useEffect(() => { {...fetchDataLogic...} editorRef.current?.editor?.commands.setContent(data?.content); },[shouldUpdate)