Next.js Adds Built-In Zero-Config TypeScript Support
Written by Kay Ewbank
Tuesday, 23 July 2019
Next.js version 9 has been released with built-in support for zero-config TypeScript, along with automatic static optimization and API routes. Next.js is a toolkit for universal, server-rendered (or statically pre-rendered) React.js applications.
The ability to use TypeScript without needing to use a plugin is an improvement from the situation when basic TypeScript support was added to Next.js 6 a year ago. In addition to using the plugin, users also had to customize settings and enable the plugin, and even then it didn't integrate type-checking and types weren't provided by the core Next.js. The improved support includes automated setup for TypeScript, and integrated type checking.
Next.js handles type-checking both in development and when building for production. If there are type errors while you're developing, Next.js will show you type errors after saving a file. Type-checking happens in the background, and type errors will propagate to the browser as they become available. If there are still type errors when you're carrying out a production build, Next.js will fail the build to stop you shipping broken code to production. Behind the scenes, the developers have migrated most of the codebase for Next.js Core to TypeScript, meaning the software now provides types for all core modules.
The next improvement to the new release is support for dynamic route segments. This has been a much-requested feature ever since Next.js was first released, but until now has been managed by having a custom server API for using Next.js programmatically. However, the developers found many users of Next.js ended up using a custom server to get true dynamic routing.
To overcome this, Next.js now supports creating routes with basic named parameters, and users can make use of the /pages directory and have Next.js automatically match requests like /post/1, and will 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 has also been added, meaning developers can make use of both fully server-rendering and statically exporting their application on a per-page basis. This has been achieved by making Next.js capable of emitting hybrid applications that contain both server-rendered and statically generated pages with no configuration or special handling required.
The final improvement is support for API Routes. Until now, if developers wanted to create an API for a website, they had to implement it separately from the Next.js app. While this was preferable for complex apps, for simple projects it's easier to be able to do the whole thing within a Next.js app.
Next.js lets you implement API routes using the /pages/api/ directory. All files located in that directory will be automatically mapped to /api/<route>.in the same way as other page files are mapped to routes.
From the performance viewpoint, Next.js now automatically prefetches components as they appear in-viewport, which should improve the responsiveness of applications by making navigations to new pages quicker. Next.js 9 will also render optimized AMP by default. which is up to 50% faster than traditional AMP.
JetBrains has launched Mellum, a proprietary large language model specifically built for coding. Currently available only with JetBrains AI Assistant, Mellum is claimed to provide faster, sm [ ... ]
Apollo has added a simpler way to integrate REST APIs into a federated GraphQL environment. Available now in public preview, can be used to map REST API endpoints to their GraphQL schema using a decla [ ... ]
