Best of Next.js — 2023
- 1
- 2
Community Picks·3y
Why I Won't Use Next.js
The author explains why they won't use Next.js and instead recommend and teach Remix as a better tool for creating excellent user experiences. They discuss the importance of focusing on standard web platform APIs, concerns about Next.js's deployment options, the perceived lack of collaboration between React and Next.js teams, and their preference for stability and simplicity in a framework.
- 3
DEV·3y
Build a Whatsapp Clone (Realtime Chat) using Next.js, Socket.io, Tailwind CSS, Node.js, Express and Prisma
This comprehensive WhatsApp clone comes packed with a range of awesome features to give you an authentic messaging experience. The Whatsapp Clone uses Next.js, Socket.io, Tailwind CSS, Node.js and Express and Prisma - DEV Community Features of the WhatsApp Clone.
- 4
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.
- 5
Do we really need a backend now? Can we build applications without backend with Next.js 14?
The role of the backend in web development has been a critical component for many years. However, with the advent of frameworks like Next.js 14, the question arises whether a backend is still needed. The author presents their opinion that for many applications, a separate backend is not necessary. They discuss the use of third-party APIs, the challenges of syncing data with databases and external APIs, and the scalability issues of deploying a frontend-focused platform. They also highlight the benefits of building applications with a custom backend, such as full control and flexibility. The author recommends their blog for more information on backend technologies.
- 6
Hacker Noon·3y
Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and More
Building a Full Stack Airbnb Clone with Next.js, Tailwind CSS, Amplication, and more. The platform is centered around the concept of a low-code development environment. Amplication is an open-source development tool designed to simplify and expedite the process of building web applications.
- 7
ITNEXT·3y
Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind
Build a Full Stack ReminderApp with React, NextJs, Typescript, ServerAction, Zod, Hook-form, Prisma, and Tailwind. Hi everyone, I published my last video: Build a full stack Reminder App.
- 8
- 9
- 10
asayer·3y
Best Practices for Security in Next.js
Explore common security vulnerabilities in web applications and learn best practices for securing Next.js applications, including keeping dependencies up-to-date, input validation, authentication and authorization, data encryption, implementing security headers, and using TypeScript for type safety.
- 11
- 12
- 13
- 14
- 15
- 16
Full stack WebPageForm builder, NextJs, Typescript ( React ), Dnd-Kit, PostgreSQL, Prisma
A tutorial on building a full stack PageForm builder using NextJs, TypeScript, Dnd-Kit, PostgreSQL, and Prisma. The tutorial includes features such as a drag and drop designer, various form fields, form preview, form sharing, form stats, and more.
- 17
freeCodeCamp·3y
How to Build a Portfolio Site with Sanity and Next.js
Sanity is a headless CMS framework for managing content. Sanity is Sanity's open source single-page app for managing your data and operations. You'll learn how to use Sanity as a data source to build a portfolio site with Next.js. In this tutorial you'll be mounting it together with your Next.
- 18
Next.js Enterprise Project Structure
This post discusses an opinionated project structure for Next.js enterprise applications. It focuses on managing code volume, state management, and flow control to prevent programmer purgatory. The post suggests using a 'src' directory, breaking down the directory further into logical pieces, and using TypeScript configuration paths.
- 19
Build and Deploy an Ecommerce Site with Next.js, Tailwind CSS, Prisma, Vercel, and daisyUI
Learn how to build and deploy a full-stack e-commerce website using Next.js, Tailwind CSS, Prisma, Vercel, and DaisyUI. The course covers various topics, such as Next.js server actions, Prisma for database operations, authentication with Next-Auth and Google login, building an amazing UI with TailwindCSS and DaisyUI, and deploying the project to Vercel.
- 20
daily.dev·3y
Moving back to React
daily.dev migrated from Preact to React in order to resolve development issues and improve performance. The move allowed for better compatibility with Next.js, enhanced development experience, and prepared the platform for future technological advancements. The migration was successful and enabled a healthier future for all daily.dev apps.
- 21
- 22
This is Learning·3y
Learning Web Development Together with a Real Project
The app is currently based on Next.js with TypeScript and Tailwind CSS. We manage some data, specifically from the GitHub APIs using the GraphQL endpoint and React Query. There's a login feature with NextAuth using GitHub as a provider. The project is open to any kind of contribution, from fixing typos to adding new features.
- 23
How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion
Learn how to create scroll animations in React using Framer Motion and Tailwind CSS. The tutorial covers setting up the project, building the scroll component, adding animation functions, and animating the components on scroll.
- 24
Secure Next.js Applications with Role-Based Authentication Using NextAuth
Learn how to secure Next.js applications with role-based authentication using NextAuth. This comprehensive tutorial covers the basics of NextAuth, integrating OAuth providers, custom authentication provider using MongoDB, and protecting pages on both the server and client side.
- 25
How to Create a Meteor Effect with React and TailwindCSS
A Meteor is basically a UI element with a head and a tail that has a gradient. In the image, the background lines are what I call meteors. We are going to animate these lines to go from the left side of the card container to the right side, giving an illusion of a meteor shower.
