Hashnode·4yBuild 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS.
This post tutorial shows you how to build 5 Web Apps in 10 hours. All of the web apps are part of the Frontend Mentor challenge projects. The goal is to make it look like the design given by the Front End Mentor. Here are the links to all the projects that we will build.
Next.js·4yBlog - Next.js 12.2
Middleware is now stable in 12.2 and has an improved API based on feedback from users. On-Demand Incremental Static Regeneration (ISR) allows you to update the content on your site without needing to redeploy. Edge API Routes support streaming responses from the server. SWC Plugins (Experimental) extend compilation with your own plugins.
DEV·4yFrom Figma to Next.js App in Minutes
AWS Amplify is a set of tools and features that lets front-end web and mobile developers quickly and easily build full-stack applications on AWS. In this post, we'll convert Figma components to React components with Amplify studio and use it in our application.
asayer·4yBuilding a Video Chat App with Next.js, 100ms, and TailwindCSS
Video chat applications have a lot of popularity and usage in the tech world today. 100ms is an infrastructure provider that allows users to effortlessly set up optimized audio and video chat interfaces. In this tutorial, readers will learn how to integrate the 100ms features to create a chat application using Next.js and TailwindCSS.
DEV·4yBuild a Full Stack App with Next.js, Tailwind, tRPC and Prisma ORM
When we create a TypeScript project that has both a Rest Api and a web app, it becomes challenging to keep type definitions concise in the long run. This is where tRPC comes in, with this toolkit it is possible to create a totally type safe application by only using inference.
The New Stack·4yFrom PHP to Next.js: What Trivago Learned Rewriting Its Web App
Hotel search service Trivago rewrote its frontend in Typescript on the Next.js framework, replacing a PHP codebase on a homegrown JavaScript framework, Melody. From April 2020 until late 2021 the platform team created, tested and deployed the new application which reduced page size by up to 37%.
Product Hunt·4yLocofy.ai - Turn Figma designs into code: React, React Native, HTML-CSS+
Locofy.ai helps builders launch 3-4x faster by converting designs to production ready code. Try Figma to React, React Native, HTML-CSS, Next.js, Gatsby in FREE BETA! Tag responsive designs, make components, get a live-prototype & export code or direct deploy.
Community Picks·4yLet’s Build Micro Frontends with NextJS and Module Federation!
Module Federation is a Webpack v5 feature that allows separate (Webpack) builds from a single application. It is similar to Apollo GraphQL federation but applied to JavaScript modules — browser and Node.js. The team behind NextJS has made incredible strides in a short period of time.
Hashnode·4ySteps To Build A Professional Next.js Portfolio
In this blog I am going to explain all necessary steps to create a multiple pages portfolio/website using React, Next.js and Tailwind with JavaScript. We will use React because its preferable when dealing with or building multiple pages, server-rendered websites. Tailwind works by scanning all of your HTML files, JavaScript components, and any other templates for class names.
LogRocket·4yBuild an eCommerce app with Next.js and Shopify
With Shopify, users can set up an online store, and thanks to their Storefront API, developers can create a custom client application to connect to it. In this article, you will learn how to set up a Shopify store and get your Store Front API token. You will then create a Next.js application to list and display your products with dummy data. Finally, you can connect your Next.JS application to your Shopify application to fetch your real products.
LogRocket·4yThe best styling options for Next.js
Next.js is a JavaScript framework based on React. With its ability to offer static and server rendering, its popularity quickly shot up amongst developers. Next.js offers many ways to support CSS in your application. In this tutorial, you will discover a few ways to implement styling in your next.js application.
JavaScript in Plain English·4y🔥 Web 3.0 Frontend Stack of 2022: Building Authentication with MetaMask, React, Next.js, and Chakra UI
Web 3.0 Frontend Stack of 2022: Building Authentication with MetaMask, React, Next.js, and Chakra UI. Vitalii Shevchuk: After a few minutes of this tutorial, you will get connected with the blockchain world. In this project we will use the following tech stack, I would say it’s the best web3.0 stack of 2022 so far.
Community Picks·4yHow to Build a Fullstack App with Next.js, Prisma, and PostgreSQL
Next.js is a next-generation ORM that can be used to access a database in Node.js and TypeScript applications. In this guide, you'll learn how to implement a fullstack sample blogging application using the following technologies. You'll use a single PrismaClient instance that you can import into any file where it's needed. You can create a new User record by calling prisma.create() or retrieve all the Post records from the database.
Codemotion·4yA Guide to the NextJS Framework
Next.js is a front-end framework that aims to marry the world of UX and backend functionality. It provides a ready-to-go solution for the server-side rendering (SSR) of React components. Next.js allows for the rendering of these React components on the server before the page is sent to the client.
Next.js·4yBlog - Next.js 12.1
Revalidate pages using getStaticProps instantly. Expanded Support for SWC: styled-components , Relay, and more. Zero-configuration Jest support using SWC. Faster Minification with SWC (RC): 7x faster minification than Terser. Self-Hosting Improvements: 80% smaller Docker images.
SaaSBase·4yGenerate 10x SEO traffic from Google using Next.js
Next.js is a React-based tool that can dynamically generate content pages at scale. It can be used to create landing pages that speak directly to users' search intent. Next.js can statically generate your dynamic React components into HTML with a single command. These HTML pages are indexable, crawlable, and Search Engine optimized.
Hashnode·4yHow to build a CLI using NodeJS 💻
The command line interface (CLI) is one of the most basic and powerful applications ever created by mankind. We are going to be building a CLI which would generate starter templates with TailwindCSS, and Prettier pre-installed. We will be using a NodeJS framework called Tailwind CSS.
asayer·4yBuilding CRUD Apps with NextJs
A CRUD application refers to an app that can perform four simple functions: Creating, Reading, Updating, and Deleting data. For example, blog sites need dynamic content management for productivity. With CRUD functionality, we can carry out these functions in our application. Next.js as our case study to look at how CRUD implementation works.
Lee Robinson·4yBuilding an Image Gallery with Next.js, Supabase, and Tailwind CSS – Lee Robinson
This tutorial shows you how to create a Next.js application that fetches content from a Postgres database. It also serves optimized, blur-up images with next/image and styles components with Tailwind CSS. I used this to create swag.vercel.app, which is a collection of tweets.
Product Hunt·4yMakeswift 2.0 - Make your Next.js site visually editable in minutes
Makewift 2.0 lets developers integrate React components from their Next.js app into our visual builder. Unlock your next.js site and give marketers and designers control over content and layout starting with just one page. Makewift is a free, open source, cross-platform programming tool for iOS and Android.
Hashnode·4yImplementing Feature Flags in a Next.js Application
Developers often struggle to roll out new features and functionalities in an incremental way. Feature flagging is a mechanism used to control access to certain features with simple switches. We will examine how we can accomplish this by creating a Next.js application that incorporates the aforementioned feature with a feature flag.
gitconnected·4yIntroducing Nexus — a Component Tree Visualizer for Next.js
Nexus is a VSCode extension designed for Next.js development. It shows a tree-like structure with relevant data fetching information for all nested components. It can also identify server-side rendering opportunities or bottlenecks right in the sidebar of the IDE.
Section·4yNext.js Blog using Typescript and Notion API
Next.js is used to create Server-side Rendering (SSR) and Static Site Generation (SSG) using JavaScript. The app fetches extra data from the server after the browser loads the website’s HTML page. SSG makes the site load even faster, creating a better user experience. This guide will help you learn how to use Next.js with Notion API to create a blog app.