Community Picks·2yGet the Best Performance on Your Next.js App
Learn how to optimize performance on your Next.js app with tips like loading only the necessary JavaScript and CSS, lazy loading dependencies, using the Next.js Image component for image optimization, preferring CSS over JavaScript, avoiding loaders at the beginning, utilizing font optimization, optimizing scripts, removing unused packages, checking bundle size, and using server components for improved rendering and caching.
Community Picks·2yZustand in Next.js 14 (with ts)
Learn how to use Zustand, a simple and scalable state management solution, in a Next.js project with TypeScript. The post guides you through setting up a new project, integrating Zustand, and creating a state store. It also covers adding actions to manage the state and persisting state data using localStorage.
Community Picks·2yBuilding An E-Commerce Store With NextJS
Learn how to build an e-commerce store with Next.js using tools like Appwrite, Next.js, Novu, React Icons, and Stripe. The tutorial covers building the application interface, adding Appwrite to the application, performing CRUD operations with Appwrite, authenticating users with Appwrite, adding Stripe payment checkout, and sending in-app and email notifications with Novu.
Community Picks·2yBuild a Landing Page with AI and Next.js
Learn how to build a landing page using Vercel's AI UI generator called v0 and Next.js. Generate UI using natural language prompts, iterate and refine the design, customize the visual style with the theme editor, and export the code to use in your Next.js project.
freeCodeCamp·2yMastering Shadcn UI Components
A comprehensive course on freeCodeCamp.org's YouTube channel teaches how to master Shadcn, a toolset providing highly customizable and accessible React components. It covers the main UI components, their integration with React or Next.js projects, and the ability to customize them via CSS variables or Tailwind CSS for consistent theming. This course is beneficial for both beginners and experienced developers looking to speed up their development process and maintain control over component styling and behavior.
Fireship·2ywhen your serverless computing bill goes parabolic...
Learn how a developer received a massive serverless bill from Versell and explore tools and alternatives to avoid the same situation. Discover tips for managing serverless costs and find out the consequences of failing to set a budget limit.
LogRocket·2yHandling file uploads in Next.js using UploadThing
UploadThing is an open-source tool designed to simplify file uploads in full-stack TypeScript applications. By leveraging this tool, developers can effortlessly handle file uploads, manage authentication, and maintain a seamless user experience. UploadThing integrates well with Next.js, and it offers customizable upload parameters, secure storage solutions, and serverless functions to handle various processes like metadata storage and callback notifications. The guide demonstrates setting up UploadThing, integrating it with Next.js, and utilizing components to upload and manage files effectively.
Community Picks·2yHow to build: a To-Do list app with an embedded AI copilot (Next.js, GPT4, & CopilotKit)
Learn how to build a To-Do list app with an embedded AI copilot using Next.js and CopilotKit. Prerequisites include a basic understanding of React or Next.js. Integrate AI functionalities using CopilotKit and generate to-do lists with the in-app chatbot.
Community Picks·2yNext.js Server Actions with next-safe-action
Learn how to enhance your Next.js App Router project by implementing type-safe and validated server actions using the next-safe-action library. The post demonstrates the benefits of using next-safe-action by comparing the server action and client component code before and after refactoring. It highlights the improvements in structure, ease-of-use, and reduction of boilerplate code, especially in client-side form handling using react-hook-form and Zod validation.
Community Picks·2yImplementing Rate Limiting in API Routes with Express and Next.js
Implementing rate limiting is essential for controlling the number of API requests users can make within a set timeframe, protecting the service from abuse and ensuring its availability and performance. The post explains the setup using the `express-rate-limit` middleware in a Next.js API route. This involves configuring parameters like `windowMs` for the time window and `max` for the maximum requests allowed. It is a practical method to enhance security and efficiency by preventing brute force attacks and managing server load effectively.
Community Picks·2yStructured logging for Next.js
This post discusses implementing structured logging in Next.js to improve error tracking and user interaction insights. It introduces two solutions: next-logger for automatic JSON formatting of logs, easily integrated but limited to specific server environments; and pino, a highly customizable and high-performance logging library for Node.js, suitable for both development and production environments. The post provides steps for integrating pino with Next.js and highlights the benefits of JSON logging for both frontend and backend applications.