Next.js

2022/07/28 (新增連結)

• 3-minute Roadmap to master the Next JS in 2021

  • Architecture

  • Routing & Dynamic Routing

  • Next JS API

    • Image

    • routing

    • Link

  • Advanced Features

  • Data Fetching

    • How To Choose Data Fetching Strategies In NextJS

    • Why I Got Rid of getInitialProps in My Next.js Project : And how you can do the same in your project with a modern data-fetching API

  • Serverless Components

  • Third-party support

• Top 10 features why Next JS is popular

  • File based routing

  • Pre-rendering

  • API Routes

  • CSS modules

  • Authentication

  • Development and production build system

  • Image component

  • Head component

  • Application Layout

  • Typescript

• Why You Should Use Next.js As the Default Framework in React Apps

• Making the Move to Next.js

• Next.js: why use it? [updated 2021]

• 5 Reasons to Switch from React to Next.js

  • React isn’t SEO-friendly

  • AdSense approval issues

  • Easier Navigation

  • API Routes

  • Built-in Image Component

• The Benefits of using NextJS in 2021

  • You get SSR and SSG out of the box

  • Great developer experience

  • Ease of upgrading

  • Automatic code splitting

• Getting Started with Next.js

• How to Think in Next.js : Understanding your client is important in any relationship. Now you also have to understand your server.

  • Client vs server contexts

  • Page types

  • API Routes

• Build Better React apps with Next.js

• Building solid Next JS architecture

• What is Static Regeneration in Next.js? : Static pages & server-side-rendering combined

• Build A Chat App With Sentiment Analysis Using Next.js

  • Next.js — A framework for building server-side rendered(SSR) React applications with ease. It handles most of the challenges that come with building SSR React apps.

  • Pusher — Pusher is a technology for building apps with varying realtime needs like push notifications and pub/sub messaging. It is the engine behind the realtime ability of our comments widget.

  • Sentiment — Sentiment is a module that uses the AFINN-165 wordlist and Emoji Sentiment Ranking to perform sentiment analysis on arbitrary blocks of input text.

  • React — A very popular JavaScript DOM rendering framework for building scalable web applications using a component-based architecture.

• Login UI with Next.js

• Introduction to Blitz.js (with Next.js)

• Next.js: Reducing Bundle Size When Using Third-Party Libraries

• How to Build Your Own Codepen-Style Editor App with Next

• Write Books in React With Next.js and MDX

• A Modern Next.js Tech Stack for Headless E-Commerce With Commerce.js, Prismic CMS, Plausible analytics

• How to make a Next.js app a PWA

• 5 Useful Next.js Tricks To Add to Your Toolbox

• 6 Next JS Tips To Improve The UX Of Your Application

• How to Client-Side-Render a Component in Next.js

• Using Absolute Imports in NextJS

• A perfect way to load Images in React

  • The Next JS Image component controls the caching, lazy loading, object-fit, & responsiveness of the images.

• Gatsby and Next JS : My experience

• Next.js + React Query: Insanely fast nearly-dynamic sites

• How to Show Loader on Page Changes in Next.js

• Awesome Next.js API Routes with next-api-decorators

• Release your features with confidence : Next.js: Feature Flags in 5 Minutes

• Render anything statically with Next.js and the Megaparam

• SSR Request Cache for React / NEXT.JS with Cacheable-Response

• Strapi

  • Let’s Create: Portfolio App With Next.js, Strapi Headless CMS and Bootstrap 5

  • 5 Things I love about Strapi, a Node.js headless CMS

• Authentication

  • Implement User Authentication With Next.js and Firebase

  • Authentication & Authorization in ReactJS (with Next.js)

• Common Mistakes to Avoid While Switching to NextJS

• Deployment

  • How to Build and Deploy a Jamstack Website Fast With Next.js (Netlify)

• CSS / style

  • Setting Up a Next.js Project With TailWind CSS

  • Embedding and Styling External HTML in Next.js Project

  • Next.js — CSS-in-JS, Fast Refresh, and Environment Variables

  • Perfect UI library with React Material UI with Next.js

• API routes

  • Next.js — Dynamic API Routes and Middlewares

  • Upload Files to Next.js With API Routes : How to use React, next-connect, Multer, and axios to upload files to your Next.js app

• Preact

  • Want To Make Your Next.js App Faster? Enable Preact Support

• Plasmic

  • Introducing Plasmic, the visual page builder for Next.js

• Route

  • How to use URLs to improve the UX of your applications

• How To Combine And Use Multiple NextJS Plugins : Using next-compose-plugins

• Using Environment Variables in Next.js

• How to Build Internationalized Next.js Applications

• How To Keep Component State Across Pages in Next.js : Using the session storage & useLayoutEffect

• How To A Create NavLink Component in NextJS

• Remaking WordPress in JS stack. Hello to a new CMS for Next.js websites.

• How to show a loader when navigating between pages in Next.js

• Stop Building REST APIs for Your Next.js Apps, Use tRPC Instead

• SEO

  • How to Effectively Use the SEO Features of a Next.js Application

• Performance

  • Pre-Production Checklist for Next.js Applications

  • Improving Next.js Performance

    • Select the right rendering mode

    • Defer loading non-critical scripts to load when the page is idle

    • Image Optimization with the Image component

    • Code-splitting client-side code to reduce initial bundle size

    • Server-side rendering with React Server components (Beta)

    • Faster build times with SWC

      • Why You Should Replace Babel with SWC in Next.js (Next.js 12)

  • Break Stuff Until it Works — Optimizing performance in NextJS

• How to Use Next.js 10’s New Image Component

• Next.js 11, Module Federation, and SSR — A brave new world

• NextJs 12 in a nutshell

• 5 New Killer Features of Next.js 12

  • Faster Builds

  • Middleware

  • URL Imports

  • Support for React 18 on the server-side

  • Collaborative Live Coding

• 6 New Features of Next.js 12

• Is Next.js Version 12 a Game Changer?