Next js 介绍
Installation
Create a new Next.js app and run it locally.
Quick start
- Create a new Next.js app named
- and start the dev server.
- Visit .
- skips prompts using saved preferences or defaults. The default setup enables TypeScript, Tailwind, App Router, and Turbopack, with import alias .
System requirements
Before you begin, make sure your system meets the following requirements:
- Node.js 18.18 or later.
- macOS, Windows (including WSL), or Linux.
Create with the CLI
The quickest way to create a new Next.js app is using , which sets up everything automatically for you. To create a project, run:
On installation, you'll see the following prompts:
After the prompts, will create a folder with your project name and install the required dependencies.
Manual installation
To manually create a new Next.js app, install the required packages:
Good to know: The App Router uses React canary releases built-in, which include all the stable React 19 changes, as well as newer features being validated in frameworks. The Pages Router uses the React version you install in .
Then, add the following scripts to your file:
绪
根据Going Serverless with Next.js, Firebase, and Now开始前端开发之旅
Going Serverless with Next.js, Firebase, and Now - Lee Robinson
Learn how to build a serverless application with Next.js, Firebase, Cloud Firestore, and easily deploy it with Now.
The Server
To use Firebase, we need to create a Node.js API(we will add firebase to the local server whose package name called app in the source ,not android/ios/web app). This will allow us to use to communicate with our Cloud Firestore database.
After generating a service account in Firebase(In firebase console setting), you can construct a server like so:
Then, you're able to define routes to communicate with your database.See source app/routes/api/index.js.
That's it for the server infrastructure(Whether or not to launch this server?!). From here, it's easy to create new routes and add functionality. You can view the completed example here.
Next 9 Update: The preferred way to handle this now is with API routes (e.g., ). (With the Next API routes ,the new Zeit Now will no need to set map in now.json, and no want express server. After explore the initial process ,we will chang to the new features intruduced by the new ver
Next.js 12
As we announced at Next.js Conf, Next.js 12 is our biggest release ever:
Update today by running .
Faster builds and Fast Refresh with Rust compiler
We want to make every Next.js application build faster for production, and get instant feedback in local development. Next.js 12 includes a brand new Rust compiler that takes advantage of native compilation.
Our Rust compiler is built on SWC, an open platform for the next generation of fast tooling. We've optimized bundling and compiling with ~3x faster refresh locally and ~5x faster builds for production. Other improvements and features include:
- Further speed improvements for large codebases: We've validated the Rust compiler with some of the largest Next.js codebases in the world.
- Improved observability into performance: Next.js now outputs Fast Refresh timing in the console for both client and server compilation, including the number of modules and files compiled.
- Underlying webpack improvements: We've made numerous improvements to webpack, including optimizing Fast Refresh and making on-demand entries more reliable.
Compilation using Rust is 17x faster than Babel and enabled b
The React Framework for the Web
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.
Next.js 15
The power of full-stack to the frontend. Read the release notes.
Built-in Optimizations
Automatic Image, Font, and Script Optimizations for improved UX and Core Web Vitals.
Next.js 5: Universal Webpack, CSS Imports, Plugins and Zones
We are very happy to introduce Next.js 5.0 to the world. It’s available on npm effective immediately.
To upgrade, run:
In addition to bumping Next.js, we upgrade the peer dependencies `react` and `react-dom`
Next.js is a toolkit for universal, server-rendered (or statically pre-rendered) React.js applications. Getting started developing an application of any size is as easy as executing . (Read more.)
With every new release we are committed to retaining backwards compatibility, offering simple upgrade paths and only making API changes when absolutely necessary. Next.js 5.0 is no exception.
Under the hood, however, Next.js has undergone a radical transformation to enable powerful new use cases and extensibility. We started by making Next.js share a universal Webpack pipeline for both server and client code.
Link to headingUniversal Webpack and Next Plugins
Next.js leverages existing powerful tools like Webpack, Babel and Uglify, presented to the end-user as a remarkable simple interface: (to develop), (to prepare for production) and (to serve) or to pre-render to static files.
One of the early decisions w