Dev Squad·2yGround. your animation kit
Animations have become easier to create with modern tools. This post introduces a set of handcrafted animated components built using Next.js, React, TailwindCSS, and Framer Motion, including elements like carousels, cards, and inputs. Check out Framer Ground for more examples.
Community Picks·2yMastering Next.js Dynamic Imports for Performance and Efficiency
Dynamic imports in Next.js help improve performance by loading JavaScript modules asynchronously, reducing initial load times and enhancing the user experience. By leveraging techniques like code splitting and React Suspense, developers can ensure efficient and responsive web applications. Best practices include prioritizing above-the-fold content and using appropriate loading indicators.
Community Picks·2yThe Ultimate Open Source Starter Kit
The Ultimate Open Source Starter Kit provides a modern stack using Neon.tech for a serverless PostgreSQL database, Next.js, Lucia Auth, Bun, Vercel, ShadCN, Tailwind CSS, and Typescript. Designed for rapid SaaS deployment, the kit includes light/dark mode, and a blog feature with MDX for content management. It offers a robust and scalable foundation easily customizable for your specific needs.
YouTube·2yNext.js School Management Dashboard UI Design Tutorial | React Next.js Responsive Admin Dashboard
Learn how to design a responsive school management dashboard using Next.js and Tailwind CSS. The dashboard displays different views for admin, student, parent, and teacher roles. Key features include animated charts, user-specific views, and a customizable form using React Hook Form. This project helps in understanding the latest versions of React and Next.js and improving frontend design skills.
Hacker News·2yBuilding the Same App Using Various Web Frameworks
The author explores migrating from a current web app stack (FastAPI, HTML, CSS, and JavaScript) to modern web frameworks like FastHTML, Next.js, and Svelte by building the same web app using each one. The app allows users to upload a CSV file, view and update the table in the browser, and download the updated data. While the author found the FastAPI implementation straightforward, they learned various tricks and optimizations while building with FastHTML, Next.js, and Svelte. The experiment also highlighted how coding assistants might favor established frameworks over newer ones due to training data biases, impacting their effectiveness.
Web Dev Cody·2yHow to Build a Full Stack Meme Generator (ImageKit, Next.js, Auth.js, Drizzle, Neon)
Learn to build a full stack meme generator using Next.js, ImageKit, Auth.js, Drizzle, and PostgreSQL. The application allows users to upload, transform, tag, and search for memes using ImageKit's powerful functionalities. It also integrates authentication for user-specific features like favoriting memes. The guide provides step-by-step instructions, from setting up the repository to manipulating images and integrating with a media library.
YouTube·2yCoding a SAAS platform in 6 hours - NextJS, Tailwind, Prisma, Postgres
This post outlines the process of developing a music SaaS platform using NextJS, Tailwind, Prisma, and PostgreSQL. It describes the motivations, design, and step-by-step coding practices. The application includes Google authentication with NextAuth, schema design with Prisma for users and streams, and deployment. Key elements of the design include user roles, stream types, and vote functionalities.
Community Picks·2yHow to Create a Secure Newsletter Subscription with NextJS, Supabase, Nodemailer and Arcjet 🔐💯
Learn how to build a secure newsletter subscription form using NextJS, Supabase, Nodemailer, and Arcjet. This guide addresses common challenges like spam sign-ups, email validation, and bot protection, integrating robust security measures and validation techniques for a seamless double opt-in process.
tailwindcss·2yRadiant: A beautiful new marketing site template
Radiant is a new SaaS marketing site template available within Tailwind UI. Built with Next.js, Framer Motion, and Tailwind CSS, it emphasizes tasteful animations and ease of customization. It features a blog powered by Sanity, a headless CMS, making content management accessible for non-developers. Interactive elements like logo clusters and keyboard shortcuts have been designed with reusable APIs to fit various product needs.
Storybook·2yStorybook 8.3
Storybook 8.3 introduces enhanced component testing through first-class Vitest integration, enabling stories to run as tests with unmatched speed. This version also offers a Next.js-Vite framework for improved developer experience (DX), significant reductions in bundle size, and the introduction of story globals for better UI state control. Numerous other improvements include better support for Angular+Vite, Vue memory management, and more.
Community Picks·2yComparing The Top React Frameworks
Create React App (CRA) is becoming outdated with its slow build times and limited capabilities. Instead, modern React frameworks like NextJS, ViteJS, Remix, and Gatsby offer advanced features such as server-side rendering, optimized build processes, and seamless deployment options. Each framework excels in different areas: NextJS for server-rendered applications, ViteJS for quick development, Remix for full-stack projects, and Gatsby for static site generation. Selecting the right framework depends on your specific project needs.
groCTO·2yWhy Next js failed for me...
The author describes the struggles faced while working on a large-scale project using Next.js and Postgres. Major issues included slow rendering during development and challenges managing the full codebase with both backend and frontend developers. Additionally, setting up the CI/CD pipeline was difficult, and Next.js 14's lack of support for Socket.io due to server-side rendering (SSR) limitations posed problems. The author mitigated some issues by splitting the backend and frontend but still faces slow development rendering.
freeCodeCamp·2yHow to Set Up ESLint, Prettier, StyleLint, and lint-staged in Next.js
Learn how to set up and configure ESLint, Prettier, Stylelint, and lint-staged in your Next.js project to ensure consistent code formatting and linting. This guide covers the installation and configuration of these tools, along with relevant plugins and VS Code extensions for optimal setup. Follow along with a new or existing Next.js project to integrate these utilities and streamline your development workflow.
This Dot·2yHow to build an AI assistant with OpenAI, Vercel AI SDK, and Ollama with Next.js
Build a voice-activated AI Assistant using Next.js, OpenAI's Whisper and TTS models, and Meta’s Llama 3.1 through the Vercel AI SDK and Ollama. The AI Assistant records audio, transcribes it to text, generates a response using the Llama model, converts the response to speech, and streams the audio back to the client. The setup involves configuring environmental variables, creating components for audio recording, setting up server-side routes for AI model interactions, and implementing client-side logic to handle the audio processing workflow.
Dev Squad·2y🚀 30-Day Next.js Project Challenge for 2024
A 30-day Next.js challenge that helps developers enhance their skills by working on various projects such as personal portfolios, blogs, e-commerce product pages, authentication systems, weather apps, to-do lists, and more. Each day focuses on building a specific type of application, including integrations with tools like NextAuth.js, Firebase, Strapi, and Contentful.
Community Picks·2yEffective Ways to Manage Shadcn Dialog Box: 3 Tips with Code
Learn effective ways to manage shadcn dialog boxes in your Next.js project with practical code examples. Discover how to handle external triggers, close dialogs programmatically, and integrate forms seamlessly. Step-by-step guide to creating a registration dialog and handling submissions included.
Josh W Comeau·2yHow I Built My Blog • Josh W. Comeau
Josh W. Comeau shares his experience building a new version of his blog, detailing the tech stack he used, including Next.js, React, MDX, Linaria, Shiki, and MongoDB. He highlights the benefits and setbacks encountered, explaining choices like using MDX for content, Linaria for styling, and Shiki for syntax highlighting. He also mentions various interactive features, like code playgrounds and widgets, and discusses performance implications and development challenges with the Next.js App Router.
YouTube·2yHow to use Cursor AI build & deploy production app in 20 mins
Learn how to use Cursor AI to build and deploy a production-ready full stack application in under an hour, even without prior programming knowledge. The process includes setting up the project, building the frontend and backend using frameworks like Next.js and libraries such as Tailwind CSS, and deploying the app on Vercel. Authentication is handled using Clerk, and Supabase is used for backend services like database and storage management.
LogRocket·2yAuth.js adoption guide: Overview, examples, and alternatives
Auth.js simplifies the implementation of user authentication in web applications, supporting various strategies like OAuth and SSO. Originally called NextAuth, it was redesigned to work not just with Next.js but various JavaScript frameworks. With built-in support for numerous databases, Auth.js handles essential functionalities such as user registration, login, and session management. Despite its learning curve and some criticisms, it remains a comprehensive solution for secure authentication. The guide provides a step-by-step tutorial to set up Auth.js in a Next.js project and demonstrates its customization capabilities.
