Next.js 9 releases with built in zero-config TypeScript support, automatic static optimization, API routes and more

Today an exciting news was awaiting the Next.js users, five months after Next.js 8 was released. Today the Next.js team has released their next version Next.js 9. The major highlights of this release are the built in zero-config TypeScript support, automatic static optimization, API routes and improved developer experience. All the features are backwards compatible with the earlier versions of Next.js.

Some of the major features are explained in brief below:

Built-In Zero-Config TypeScript Support

Automated Setup

Getting started with TypeScript in Next.js is easy: rename any file, page or component, from ‘.js’ to ‘.tsx’. Then, run ‘next dev’. Next.js will also create a default ‘tsconfig.json’ with sensible defaults, if not already present.

Integrated Type-Checking

While in development Next.js will show type errors after saving a file. Type-checking happens in the background, allowing users to interact with the updated application in the browser instantly. Type errors will propagate to the browser as they become available. Next.js will also automatically fail the production build, if type errors are present. This helps prevent shipping broken code to production.

Dynamic Route Segments

Next.js supports creating routes with basic named parameters, a pattern popularized by ‘path-to-regexp’. Creating a page that matches the route ‘/post/:pid’ can now be achieved by creating a file in your pages directory named: ‘pages/post/[pid].js’.

Next.js will automatically match requests like ‘/post/1, /post/hello-nextjs’, etc and render the page defined in ‘pages/post/[pid].js’. The matching URL segment will be passed as a query parameter to your page with the name specified between the ‘[square-brackets]’.

Automatic Static Optimization

Starting with Next.js 9, users will no longer have to make the choice between fully server-rendering or statically exporting their application. Users can now do both on a per-page basis.

Automatic Partial Static Export

A heuristic was introduced to automatically determine if a page can be prerendered to static HTML using ‘getInitialProps’. This allows Next.js to emit hybrid applications that contain both server-rendered and statically generated pages.

The built-in Next.js server (‘next start’) and programmatic API (‘app.getRequestHandler()’) both support this build output transparently. There is no configuration or special handling required. Statically generated pages are still reactive: Next.js will hydrate the application client-side for full interactivity. Furthermore, Next.js will update the application after hydration also, if the page relies on query parameters in the URL.

API Routes

To start using API routes, users have to create a directory called ‘api/’ inside the ‘pages/ directory’. All files in this directory will be automatically mapped to ‘/api/<your route>’, in the same way as other page files are mapped to routes. All the files inside the ‘pages/api/’ directory export a request handler function instead of a React Component.

Besides using incoming data, the API endpoint will also return data. Next.js will provide ‘res.json()’ by default making it easier to send data. When making changes to API endpoints in development, the user need not restart the server as the code is automatically reloaded.

Production Optimizations

Prefetching in-Viewport <Link>s

Next.js 9 will automatically prefetch <Link> components as they appear in-viewport. This feature improves the responsiveness of users application by making navigations to new pages quicker. Next.js uses an Intersection Observer to prefetch the assets necessary in the background. These requests have low-priority and yield to ‘fetch()’ or XHR requests. Next.js will avoid automatically prefetching if the user has data-saver enabled.

Optimized AMP by Default

Next.js 9 will render optimized AMP by default. Optimized AMP is up to 50% faster than traditional AMP.

Dead Code Elimination for typeof window Branches

Next.js 9 replaces ‘typeof window’ with its appropriate value (undefined or object) during server and client builds. This change allows Next.js to remove dead code from compiled code automatically.

Developer Experience Improvements

Next.js 9 aims to bring unobtrusive and ease-of-use improvements to help its users develop in the best way.

Compiling Indicator

An RFC / "good first issue" has been created to discuss potential solutions for the problem of indicating that work is being done. Users will also see a small triangle to show that Next.js is doing compilation work, at the bottom right corner of the page.

Console Output

Starting from Next.js 9, the log output will jump less and will no longer clear the screen. This allows for a better overall experience as the users terminal window will have more relevant information and will flicker less, while Next.js will integrate better.

Users are very happy with the striking features introduced in Next.js 9.

https://twitter.com/johnbrett_/status/1148167900840255489

https://twitter.com/chanlitohem/status/1148167705834352640

A user on Reddit says that, “That API routes feature looks amazing. Will definitely check it out.”

Another Redditor comments, “Gonna give v9 a try today. Very stoked for the new dynamic routing!”

Head over to the Next.js official blog for more details.

Next.js 7, a framework for server-rendered React applications, releases with support for React context API and Webassembly

Meet Sapper, a military grade PWA framework inspired by Next.js

16 JavaScript frameworks developers should learn in 2019