Best of Next.js — July 2024

1. 1
   Article

   Community Picks·2y

   Next.js Full-Stack Web App (2024)

   The post introduces a Next.js full-stack starter template tailored for Next.js 14, designed to streamline the setup process for creating modern web applications. It includes features like a scalable project structure, TypeScript support, pre-configured Ant Design components, SASS module styling, social authentication, route guarding, sample APIs with MongoDB integration, and custom alias imports. Detailed setup instructions are available in the GitHub repository linked in the post.

   630

   16
2. 2
   Article

   freeCodeCamp·2y

   How to Optimize Next.js App Performance With Lazy Loading

   Learn how to optimize Next.js app performance by implementing lazy loading techniques for client components. By deferring the load of client components and imported libraries until needed, initial load times can be significantly improved. The post covers techniques using `next/dynamic` and `React.lazy()` with `Suspense`, along with handling lazy loading for named exports and considerations for server components.

   300

   20
3. 3
   Article

   Community Picks·2y

   Installation • Tremor Raw

   Tremor Raw can be set up with React v18.2.0+ and Tailwind CSS v3.4+. It is compatible with frameworks like Next.js, Vite, and Remix. Additional resources include Tremor Blocks for production-ready components and a Figma UI Kit for design purposes. The Remix Icon set, licensed under Apache License 2.0, is recommended for use.

   226

   10
4. 4
   Article

   DEV·2y

   Goodbye Webflow, Hello Our Shiny New Website

   After growing frustrated with Webflow, the team decided to revamp their website by switching to a headless CMS. They evaluated options like WordPress, Webflow, and hardcoding with React but found each limiting. Finally, they chose Payload for its excellent integration with Next.js, offering full customization and better performance. This decision allowed them to have control over performance, enhanced SEO and analytics, and a user-friendly content editing experience.

   166

   6
5. 5
   Article

   freeCodeCamp·2y

   How to Set Up a CI/CD Pipeline with Husky and GitHub Actions

   Learn how to set up a CI/CD pipeline for a Next.js application using Husky and GitHub Actions. This guide covers the basics of continuous integration and delivery, setting up a Next.js app with Vitest, configuring Git hooks with Husky, creating GitHub Actions workflows for automation, and deploying the project using Vercel. Ideal for developers familiar with React, Next.js, and Git.

   146

   4
6. 6
   Article

   Robin Wieruch·2y

   Data Fetching with Server Actions in Next.js

   The post discusses data fetching using Server Actions in Next.js. It highlights the straightforwardness of data fetching in React Server Components but questions the effectiveness of data fetching in Client Components without Server Actions. The author describes using Route Handlers and Server Actions to fetch data, comparing both methods. Despite acknowledging that Server Actions are typically for mutations rather than queries, the author notes the improved developer experience when reusing query functions as Server Actions in Client Components.

   112

   6
7. 7
   Article

   freeCodeCamp·2y

   How to Use Server-Side Rendering in Next.js Apps for Better SEO

   Server-side rendering (SSR) improves a website's SEO by generating HTML content on the server before sending it to the browser, ensuring better indexing by search engines. SSR is particularly advantageous with Next.js, a popular React framework. The post outlines steps to set up SSR in a Next.js project, including installing Next.js, understanding project structure, and creating SSR pages. It also discusses the benefits of SSR for SEO, such as improved indexing, faster load times, better social media sharing, and enhanced user experience.

   106

   1
8. 8
   Article

   Community Picks·2y

   How to Build a Request Access Approval System using Next.js

   Next.js is a robust React framework for building web applications. Creating a Request Access Approval (RAA) System is essential for managing access to sensitive data within organizations. By using Permit.io, Next.js applications can handle complex access requests and manage approvals efficiently. The guide walks through setting up a Next.js project, integrating Permit.io for authorization, and implementing user management and access request components to safeguard critical information.

   87

   3
9. 9
   Video

   Jack Herrington·2y

   Payload: The Complete Backend for NextJS

   Build a movie voting application using Payload 3.0, an open-source backend framework that pairs seamlessly with NextJS. The app includes a detailed admin panel without writing code, supports Postgres and MongoDB, and showcases easy deployment. The tutorial covers creating collections, setting up a database, configuring environment variables, building the front-end with Tailwind CSS, adding server actions, and deploying via Vercel.

   84

   2
10. 10
    Article

    Hacker News·2y

    onlook-dev/studio: The power of webflow for your React app

    Onlook Studio is a browser-powered visual editor designed for React + TailwindCSS applications. It allows developers to build UIs visually and supports Next.js and standard React apps with built-in plugins. The post includes instructions for cloning the repository, installing dependencies, and running demo projects. It also provides guidelines on integrating Onlook plugins in user's own projects. Further details are available in their documentation, roadmap, and open issues.

    82
11. 11
    Article

    Web Tools Weekly·2y

    Web Frameworks, JavaScript Utilities, Uncats

    Issue #573 of Insanely Cool Tools brings a curated collection of unique tools and utilities designed to enhance productivity and spark creativity. Highlights include a range of web frameworks like Next.js boilerplates, customizable React components, and typesafe full-stack setups. The JavaScript utilities section features tools like a rich text editor, barcode scanning, and consent banner utilities. Additionally, uncategorizable tools such as a local development tool for WordPress and an open-source alternative to Netlify are featured.

    80

    2
12. 12
    Article

    Product Hunt·2y

    NextLevel - Take your Next.js app to the next level

    NextLevel is a new tool designed to enhance your Next.js app, focusing on analytics and developer tools. It is an open-source project, making its debut on July 25th, 2024. This is the first launch of NextLevel, and it aims to offer robust support for Next.js applications.

    78

    1
13. 13
    Video

    Community Picks·2y

    Building Meal Planner AI with Next.js & OpenAI

    78

    3
14. 14
    Article

    Semaphore·2y

    Cache Optimization on NextJS Without Vercel

    Optimizing cache in a Next.js application, even without using Vercel, can significantly enhance load times, scalability, and user experience. Next.js offers several built-in features for caching, such as Static Site Generation (SSG) and Incremental Static Regeneration (ISR), which pre-render pages and update them in the background. Utilizing Cache-Control headers and client-side caching techniques like service workers and local storage can further improve performance. Integrating a Content Delivery Network (CDN) distributes static content globally, ensuring faster load times and reduced server load.

    74

    1
15. 15
    Article

    freeCodeCamp·2y

    Full Stack Development with Next.js, Clerk, and Neon Postgres

    This tutorial provides a comprehensive guide on building full-stack applications using Next.js, Clerk, and Neon, a serverless PostgreSQL database. It covers setting up Neon, integrating it with Next.js, managing the database with Drizzle ORM, implementing user authentication with Clerk, and performing CRUD operations. The tutorial also highlights Neon's unique features like serverless architecture, auto-scaling, and instant branching.

    69
16. 16
    Article

    Prismic·2y

    Top 15 Next.js Blog Starter Templates in 2024

    Building a blog from scratch can be challenging and time-consuming, but various SEO-friendly Next.js templates can help expedite the process. These templates offer features like fast load times, server-side rendering for better SEO, and built-in solutions for image optimization and CMS integration. Essential features for a Next.js blog include a table of contents, site search functionality, comments, rich media, author profiles, and syntax highlighting for code snippets. Top-notch templates like Prismic, Stablo, Metablog, and many others come equipped with these capabilities, offering flexibility and improved user experience.

    65
17. 17
    Article

    Community Picks·2y

    scriptkavi/hooks: Customizable and Open Source React Hooks

    scriptkavi/hooks offers a collection of customizable and reusable React hooks to enhance your web development projects. It supports NextJS and Vite, and its open-source nature allows contributions from developers. The post provides detailed instructions on setting up and utilizing these hooks in a NextJS application.

    64

    5
18. 18
    Article

    TkDodo·2y

    Please Stop Using Barrel Files

    In a discussion on proper file organization in frontend development, the author argues against using barrel files in JavaScript and TypeScript projects. Barrel files, which re-export components from a single file, can lead to circular imports and decreased development speed due to unnecessary module loading. While useful in library entry points, they create complications in application code, making it harder to manage imports and debug errors. Instead, consistent and straightforward import practices are recommended.

    62

    5