Best of Next.js — December 2023

1. 1
   Article

   builder.io·2y

   Next.js 14: Layouts vs Templates

   Next.js 14 introduced layouts and templates for building UI in web applications. Layouts act as persistent UI shells that wrap around pages, while templates remount with each page transition. Layouts ensure consistency, maintain state, and boost performance, while templates provide isolation, behavioral flexibility, and the ability to alter default behaviors. Choosing between layouts and templates depends on the specific needs of each page and the desired balance between user experience and performance.

   249

   5
2. 2
   Article

   Hacker News·2y

   Make Beautiful Logos Fast and Free

   LogoFast offers presets, the #1 NextJS boilerplate, and is loved by over 1,000 makers. It helps users ship fast and save time on projects.

   183

   9
3. 3
   Article

   Community Picks·2y

   JavaScript Fullstack WEB App: Nextjs & Docker

   Learn how to create a simple yet complete full stack app using Next.js, Tailwind CSS, Node.js, Express, Prisma, PostgreSQL, Docker, and Docker Compose.

   135

   4
4. 4
   Article

   Community Picks·2y

   Build a full stack app with Rust, Next.js and Docker

   Learn how to build a full stack app with Rust, Next.js, and Docker. The app uses Next.js 14 with TypeScript and Tailwind CSS for the frontend, Rust without any framework for the backend, and PostgreSQL for the database. Docker and Docker Compose are used to containerize and run the app. The article provides step-by-step instructions on setting up the database, backend, and frontend, as well as testing the app using Postman.

   91
5. 5
   Article

   Hacker News·2y

   penxio/penx: A structured note-taking app for personal use.

   PenX is a structured note-taking app designed for personal use. It prioritizes privacy and features local-first data ownership, end-to-end encryption for data syncing, and GitHub-based version control. The primary tech stack includes Next.js, TypeScript, tRPC, Prisma, NextAuth.js, Slate.js, and IndexedDB. The maker of PenX is 0xZion, a freelancing full-stack developer.

   89

   2
6. 6
   Article

   DEV·2y

   Build a Functional Search Bar in Next.js

   Learn how to build a functional search bar in Next.js and handle pagination and filtering of search results based on the data structure.

   71
7. 7
   Article

   freeCodeCamp·2y

   How to Fetch API Data in React

   This article discusses different methods and tools to fetch API data in React. It explains the importance of APIs in web development, the types of HTTP requests, and provides examples of how to use the stale-while-revalidate (SWR) method, the fetch() method, React Query, Axios library, and the useFetch custom hook from react-fetch-hook to fetch data. Each method has its advantages and can improve programming skills in creating reliable apps.

   67

   1
8. 8
   Article

   Community Picks·2y

   Light & Dark Mode in Next.js App Router + Tailwind with No Flicker

   Learn how to apply light and dark mode themes with TailwindCSS in a Next.js app using the next-themes package. Discover the challenge of toggling between themes in Next.js and how next-themes can help avoid page flickering when changing themes.

   67

   2
9. 9
   Article

   LogRocket·2y

   Diving into Server Actions in Next.js 14

   Next.js Server Actions are functions that execute on the server side and address the problems of data fetching and mutations. They provide a better way of thinking about data fetching and allow for easier handling of database mutations within components.

   64
10. 10
    Article

    Community Picks·2y

    Next.js app deployed with Docker - does it make sense?

    Learn how to dockerize a Next.js application and consider the advantages and use cases of using Docker with Next.js. Docker provides better security, dependability, faster deployment procedures, and simpler application management. While Docker may not be necessary for a single Next.js application, it becomes relevant when running multiple services.

    61

    2
11. 11
    Article

    freeCodeCamp·2y

    Build and Deploy a Hotel Management Site with Next.js, Sanity.io, Stripe

    Learn how to build a hotel management website using Next.js, React, Sanity.io, Tailwind CSS, and Stripe. The course covers CRUD operations with Sanity.IO, room booking and review, payment processing with Stripe, React Context for UI themes, advanced search and authentication, TypeScript and useSwr hook, and deployment on Vercel.

    56