NextJS

July 29, 2024 | permanent

Framework #

tags: React URL

Used by some of the world’s largest companies, Next.js enables you to create high-quality web applications with the power of React components.

The React Framework for Production

Next.js gives you the best developer experience with all the features you need for production:

hybrid static & server rendering,
TypeScript support,
smart bundling,
route pre-fetching,
and more. No config needed.
Server Side Rendering SSR cannot be done in React
Client Side Rendering React can do this

React #

Next.js is a very popular React framework #

It has been ranked #1 in the Node.js Framework section of Rising Stars JS 2021. It offers a lot of features like:

Zero config: Automatic compilation and bundling. Optimized for production from the start.
Hybrid: SSG and SSR: Pre-render pages at build time (SSG) or request time (SSR) in a single project.
Incremental Static Generation: Add and update statically pre-rendered pages incrementally after build time.
TypeScript Support: Automatic TypeScript configuration and compilation.
Fast Refresh: Automatic TypeScript configuration and compilation. ref, strapi

What’s in Next.js? #

Everything you need to build great products on the web.

Deploying with DO Apps Platform #

URL

Use Cases #

To deploy static HTML sites while hiding “.html” extensions
server side rendering

OCR of Images #

2024-04-24_13-05-14_screenshot.png #

ORIGINAL 1440PX 375PX Built-in Optimizations Automatic Image, Font, and Script Optimizations for improved UX and Core Web Vitals. Dynamic HTML Streaming instantly stream UI from the server, integrated with the App Router and React Suspense. React Server Components Add components without sending additional client- side JavaScript. Built on the latest React features. Data Fetching CSS Support Client and Server Rendering Flexible rendering and caching options, including Incremental Static Regeneration (ISR), on a per-page Make your React component async and await your data. Next.js supports both server and client data Style your application with your favorite tools, including support for CSS Modules, Tailwind CSS, and popular community libraries. fetching. level. Server Actions Route Handlers Run server code by calling a function. Skip the API. Then, easily revalidate cached data and update your UI in one network rounatrip. Build API endpoints to: securely connect with third- party services for handling auth or listening for webhooks. Next.js 14 The power of full-stack to the frontend. Read the release notes. Advanced Routing & Nested Layouts Create routes using the file system, including support for more advanced routing patterns and UI layouts. Middleware Take control of the incoming request. Use code to define routing and access rules for authentication, experimentation, and internationalization.