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.

nextjs

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.

TypeScript in Next.js

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.

nextjs

 

More Information

Next.JS Site

Next.JS On GitHub

Related Articles

Next.js 5 Improves Webpack Support

TypeScript 2.7 Improves Type Inference

NativeScript 6 Goes Webpack All The Way 

React 16 Adds Fragments

React 15.5 Gets Ready For Rewrite

React 15 Released

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, Facebook or Linkedin.

Banner


GauGAN Will Draw Your Landscape For You
04/08/2019

GauGAN - yes it's an artistic Generative Adversarial Network with a cute name - can draw a landscape that you specify in very general terms. It is so good it just won two awards at this year's SIGGRAP [ ... ]



Facebook Releases Hermes JavaScript Engine
19/07/2019

Facebook has released Hermes, a JavaScript engine designed to make native Android apps built using the React Native network load faster. Hermes, which has been open sourced under a MIT license,&n [ ... ]


More News

appC

 



 

Comments




or email your comment to: comments@i-programmer.info