mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
e117c000e4
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 <[email protected]>
87 lines
2.2 KiB
JavaScript
87 lines
2.2 KiB
JavaScript
if (process.env.POLYFILL_FETCH) {
|
|
global.fetch = require('node-fetch').default
|
|
global.Request = require('node-fetch').Request
|
|
global.Headers = require('node-fetch').Headers
|
|
}
|
|
|
|
const { readFileSync } = require('fs')
|
|
const next = require('next')
|
|
const { join } = require('path')
|
|
const { parse } = require('url')
|
|
|
|
const dev = process.env.NODE_ENV !== 'production'
|
|
const dir = __dirname
|
|
const port = process.env.PORT || 3000
|
|
const { createServer } = require(process.env.USE_HTTPS === 'true'
|
|
? 'https'
|
|
: 'http')
|
|
|
|
const app = next({ dev, hostname: 'localhost', port, dir })
|
|
const handleNextRequests = app.getRequestHandler()
|
|
|
|
const httpOptions = {
|
|
key: readFileSync(join(__dirname, 'ssh/localhost-key.pem')),
|
|
cert: readFileSync(join(__dirname, 'ssh/localhost.pem')),
|
|
}
|
|
|
|
process.on('unhandledRejection', (err) => {
|
|
console.error('unhandledRejection:', err)
|
|
})
|
|
|
|
app.prepare().then(() => {
|
|
const server = createServer(httpOptions, async (req, res) => {
|
|
if (req.url === '/no-query') {
|
|
return app.render(req, res, '/no-query')
|
|
}
|
|
|
|
if (req.url === '/unhandled-rejection') {
|
|
Promise.reject(new Error('unhandled rejection'))
|
|
return res.end('ok')
|
|
}
|
|
|
|
if (/setAssetPrefix/.test(req.url)) {
|
|
app.setAssetPrefix(`http://127.0.0.1:${port}`)
|
|
} else if (/setEmptyAssetPrefix/.test(req.url)) {
|
|
app.setAssetPrefix(null)
|
|
} else {
|
|
// This is to support multi-zones support in localhost
|
|
// and may be in staging deployments
|
|
app.setAssetPrefix('')
|
|
}
|
|
|
|
if (/test-index-hmr/.test(req.url)) {
|
|
return app.render(req, res, '/index')
|
|
}
|
|
|
|
if (/dashboard/.test(req.url)) {
|
|
return app.render(req, res, '/dashboard')
|
|
}
|
|
|
|
if (/static\/hello\.text/.test(req.url)) {
|
|
return app.render(req, res, '/static/hello.text')
|
|
}
|
|
|
|
if (/no-slash/.test(req.url)) {
|
|
try {
|
|
await app.render(req, res, 'dashboard')
|
|
} catch (err) {
|
|
res.end(err.message)
|
|
}
|
|
}
|
|
|
|
if (/custom-url-with-request-handler/.test(req.url)) {
|
|
return handleNextRequests(req, res, parse('/dashboard', true))
|
|
}
|
|
|
|
handleNextRequests(req, res)
|
|
})
|
|
|
|
server.listen(port, (err) => {
|
|
if (err) {
|
|
throw err
|
|
}
|
|
|
|
console.log(`> Ready on http://localhost:${port}`)
|
|
})
|
|
})
|