Best of Next.js β€” September 2024

  1. 1
    Article
    Avatar of devsquadDev SquadΒ·2y

    Ground. 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.

  2. 2
    Article
    Avatar of communityCommunity PicksΒ·2y

    Mastering 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.

  3. 3
    Article
    Avatar of communityCommunity PicksΒ·2y

    The 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.

  4. 4
    Video
    Avatar of youtubeYouTubeΒ·2y

    Next.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.

  5. 5
    Article
    Avatar of hnHacker NewsΒ·2y

    Building 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.

  6. 6
    Video
    Avatar of webdevcodyWeb Dev CodyΒ·2y

    How 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.

  7. 7
    Video
    Avatar of youtubeYouTubeΒ·2y

    Coding 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.

  8. 8
    Article
    Avatar of communityCommunity PicksΒ·2y

    How 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.

  9. 9
    Article
    Avatar of tailwindcsstailwindcssΒ·2y

    Radiant: 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.

  10. 10
    Article
    Avatar of storybookStorybookΒ·2y

    Storybook 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.

  11. 11
    Article
    Avatar of communityCommunity PicksΒ·2y

    Comparing 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.

  12. 12
    Article
    Avatar of groctogroCTOΒ·2y

    Why 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.

  13. 13
    Article
    Avatar of freecodecampfreeCodeCampΒ·2y

    How 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.

  14. 14
    Article
    Avatar of thisdotThis DotΒ·2y

    How 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.

  15. 15
    Article
    Avatar of devsquadDev 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.

  16. 16
    Article
    Avatar of communityCommunity PicksΒ·2y

    Effective 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.

  17. 17
    Article
    Avatar of joshwcomeauJosh W ComeauΒ·2y

    How 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.

  18. 18
    Video
    Avatar of youtubeYouTubeΒ·2y

    How 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.

  19. 19
    Article
    Avatar of saastipsSaaS TipsΒ·2y

    If you own a website you don't want to miss this

    Integrate a free AI chatbot on your website, complete with unlimited training data and AI messages. Visit voxal.ai for more details.

  20. 20
    Article
    Avatar of flaviocopesFlavio CopesΒ·2y

    Next.js, passing an id to a server action

    Learn how to pass an `id` to a server action in Next.js. The guide covers the simplest method using hidden input fields and an alternative approach using the `bind()` method. It includes practical code examples for both techniques.

  21. 21
    Article
    Avatar of logrocketLogRocketΒ·2y

    Auth.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.