Jiachi Liu
e117c000e4
Redesign nextjs logging ( #54713 )
...
The current logging styles has been existed for a while, this PR gives a fresh impression for the logging output from Next.js.
We want to achieve few new goals that makes the output clean, modernized, sweet 🍫 .
Few goals are addressed with this redesign:
## Refresh Impression & Simplification
The new design of logging is much more information centralized and streamlined.
* Given a `ready` message at the begining when compilers are bootstrapped.
* Only show `compiled` event with green check mark indicating succesful compilation, this will merge the unclear `compiling` event which shows `(client and server)` before, now tell you the route compilation info in one line.
hello world app
### `next dev`
#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/9649b340-8241-4756-a2b3-a989f0b74003 " height="120">
<img src="https://github.com/vercel/next.js/assets/4800338/ee181263-3dd4-40d0-9ffc-819a56b45900 " height="120">
### `next build`
#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/5db9829a-9ffc-49f0-b030-93ee92f5c248 " width="360">
<img src="https://github.com/vercel/next.js/assets/4800338/b9527b83-27c8-4426-9c0d-c0d4072b7d58 " width="360">
### error status
#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/00455226-ace7-468b-8d90-0d36bf038489 " height="120">
<img src="https://github.com/vercel/next.js/assets/4800338/1be8c451-d3f0-465c-9ef7-6b0dde7cff85 " height="120">
## Streamlization
If you have customized envs and experiments Next.js will give the brief in the early summary about your network information, env vars, and enabled experimental features
<img src="https://github.com/vercel/next.js/assets/4800338/ca1a7409-1532-46cb-850f-687e61e587b2 " width="400">
## Polish
### fetching logging structure
#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/97526397-dffe-4736-88ed-e5cbe5e945bd " width="400">
<img src="https://github.com/vercel/next.js/assets/4800338/ab77c907-5ab5-48bb-8347-6146d2e60932 " width="400">
### Dedupe Duplicates
The logging is moved from `@next/env` to `next` itself, `@next/env` will only notify the invoker that the env is reloaded. Then the duplicated logs for the env reloading cases can be avoid.
#### After vs Before
<img src="https://github.com/vercel/next.js/assets/4800338/04799295-e739-4035-87aa-61cec962fc39 " width="400">
<img src="https://github.com/vercel/next.js/assets/4800338/e29020c9-0031-4bf3-a21b-8b64633f43a2 " width="400">
### Different indicators
Use unicode text icons for different situation:
* passed -> check mark
* warning -> warning
* error -> red cross
* loading -> circle
<img src="https://github.com/vercel/next.js/assets/4800338/715c34bd-298f-4990-a5d7-e12e455ead44 " width="400">
Co-authored-by: Tim Neutkens <6324199+timneutkens@users.noreply.github.com>
2023-09-05 11:40:00 +00:00
