Zero configuration TypeScript with Next

I've been enjoying the development experience of Next with TypeScript so when I saw this Tweet I wanted to test it out;

To actually test this you need more than just two lines though. With npm and node already installed you can use the following commands.

npm i next -g
mkdir nextts
cd nextts
npm i --save-dev typescript @types/react @types/node
npm i react react-dom next
mkdir pages
echo 'export default () => <h1>Hello world.</h1>;' > pages/index.tsx
next dev

This starts a server on localhost:3000 displaying "Hello world."

Firefox showing localhost:3001

Note that I used .tsx instead of .ts to allow for JSX in index.tsx. You can configure TypeScript to allow JSX in .ts files but we are going for zero configuration here with sensible defaults so using file extensions makes more sense.

I hope Next continues to push zero configuration developer experiences like this.

No Comments Yet