Next.js: Create an example for NextJS, server.ts, and typescript

[majelbstoat]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

The current withTypescript example works well for client-side only NextJS implementations. However, given that Next5 now loads Typescript, it isn't clear exactly what combination of tsconfig.json/next.config.(t|j)s/tsc/babel/ts-node/babel-node needs to be set for an implementation with a server.ts file to work with correct source maps etc.

A simple example that renders a hello world page for both 'yarn dev' demo'ing hot reloading, and 'yarn build && yarn start' would be great.

[TheRobBrennan]

Hiya @majelbstoat - I've been working on a demo to solve this exact problem.

Check out https://github.com/TheRobBrennan/demo-nextjs-v5

Highlights include

• Incorporate the new NextJS 5 with TypeScript and Redux
• Incorporate Redux DevTools for viewing and debugging the Redux store
• Incorporate Jest and Enzyme for testing the application
  
  
  
  • My original goal was to have as close to 100% test coverage as REASONABLY POSSIBLE
  
  
• Incorporate a back-end ExpressJS server for handling custom server routes

[majelbstoat]

Oh, nice, @TheRobBrennan. Looks useful - especially the stuff on page :) I'm specifically interested in what it would mean for server.js to be a type-safe server.ts (itself due to a dependency on a library written in typescript)

[TheRobBrennan]

@majelbstoat Challenge accepted. The server file is now a type-safe server.ts file

[majelbstoat]

@TheRobBrennan, it's awesome that you're doing this, and I don't mean to be picky, but that file is plain javascript 😬The kind of file I'm trying to run might, for example, start:

import express from 'express'
import next from 'next'
import { bar } from './lib/foo' // where lib/foo.ts has a named export, bar.

const port: number = parseInt(process.env.PORT, 10) || 3000;

i.e. the kind of file that cannot just be run by node, which is what I've been struggling with this morning :) (Yes, port will implicitly be a number, so it's superfluous in this specific case, but just as an example.)

(And if I figure it out, I'll be sure to share 😉)

[TheRobBrennan]

Depends on your environment, I guess. TypeScript should be able to run plain JavaScript too - especially depending how it's configured - and that file was updated to match all TS lint rules....

Anyway...good luck!

[timneutkens]

You'll have to manually compile the server file. Next is unaware of it, since it's the file that starts up next itself.

[kachkaev]

@majelbstoat see https://github.com/zeit/next.js/tree/canary/examples/custom-server-typescript 🎉

[lifeiscontent]

@kachkaev how do you use babel in that example? e.g. if I want to use the .env example next.js app and use typescript?

[kachkaev]

I've been using .env in TS without problems. It works straight away on the server and can be also used on the client by passing an env variable in request ctx. I personally prefer envalid to parse and check .env variables, but that's not required.

Sorry for self-advertising, but you can find a working example in my personal website source code:
https://gitlab.com/kachkaev/website-frontend

[lifeiscontent]

@kachkaev I tried running the build command in the package.json and it didn't run for me.

or more so I copied your directory structure, but my .next folder is being placed in src and not the project directory. Do you know why?

[kachkaev]

@lifeiscontent I'd put these things into a checklist:

• scripts in package.json must be different from the standard ones, e.g. devshould run nodemon src/server.ts

• const app = next(..) in src/server.ts should have custom parameters like on my website example

• next.config.js should exist with distdir defined. if you are using some extra plugins that I am not, cn it be that this option is lost while being passed from one plugin to another?

[lifeiscontent]

@kachkaev got it, thanks for your help!