Comments (24)
If you are using VSCode it is also possible to hide derived JS file.
from next.js.
I have created a PR with a TypeScript example that works with just running npm run dev
.
Any suggestions is appreciated.
from next.js.
When we add custom babel / webpack config, I would love to have a TypeScript example and a Flow example. @rossipedia thanks a lot for the temporary workaround. If you'd be up for documenting the temporary solution in the Wiki, I think a lot of people would appreciate it!
from next.js.
You don't need a custom webpack config (althouh it would be nice). There's nothing preventing you from using typescript as-is. For example:
tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"jsx": "react",
"noImplicitAny": false,
"sourceMap": false
}
}
As I don't think next.js has any typings (yet), you might need a next.d.ts
file in the typings
folder to define some things. For example:
next.d.ts:
declare module 'next/head' {
import * as React from 'react';
export default class Head extends React.Component<any, any> {}
}
declare module 'next/link' {
import * as React from 'react';
export default class Link extends React.Component<any, any> {}
}
That should get you rolling. You can use the same approach for other next specific modules.
To make the workflow a little smoother you can run node_modules/.bin/tsc --watch
(or just tsc --watch
if you have TypeScript installed globally) along with next
, so that changes to your .tsx
files get compiled automatically and cause next.js to reload.
from next.js.
I found it pretty easy to just edit the gulpfile to also compile .ts files.
https://github.com/zeit/next.js/blob/master/gulpfile.js#L123
Why not compile .ts files with typescript and .js files with babel by default?
from next.js.
So here's my attempt https://github.com/jagreehal/next-typescript
It works fine apart from the page reloading twice as I don't think there is a way to configure files NOT to be watched by the hot-reloader.
If additional ignore entries could be added here via next.config.js then a solution like this might work.
from next.js.
I made a PR to @jagreehal example to separate the ts and js. Now the ts is in src
but is there a way to point next
to a different folder than the root? Then the output folder for tsc
could be dist
instead which would make the folder structure look much cleaner!
from next.js.
With TS 2.1 and above (if I remember correct) you no longer need the typings, if it's in node_modules
it can always be imported as any
.
Update: Sorry for replying to such an old post, I didn't see the notification mail until now. Google Inbox grouped it together with another notification mail and I didn't notice the date.
from next.js.
Custom webpack config would make this happen: #40
from next.js.
wow @rossipedia i have been doing literally this exact thing locally, and it works!
it occurred to me moments after i opened this issue that it should be quite possible to layer tsc -p .
on top of next
, and of course it's that easy.
typings are proving a little more insidious than that because the library injects props.url
into pages and treats getInitialProps
slightly differently. so i'm still trying to figure out how to correctly type those.
from next.js.
@rauchg I'm traveling this weekend, but if nobody else gets to it I'd be happy to add a page to the wiki, I can whip it up during my flight tomorrow
from next.js.
trying to get running with typescript - things were going great until I decided to configure the page header...
import Head from "next/head";
...
render() {
return (
<div>
<Head>
<title>Yo!</title>
</Head>
<div>unicorn</div>
</div>
);
}
React.createElement
starts complaining that the element shouldn't be null. It appears that the default export from "next/head" is null:
anyone else seeing this in a typescript project?
from next.js.
Have you tried
const Head = require('next/head')
?
from next.js.
Of course
On Nov 5, 2016, 6:10 AM -0700, Giacomo Rebonato [email protected], wrote:
Have you tried
const Head = require('next/head')
?
β
You are receiving this because you commented.
Reply to this email directly, view it on GitHub (#96 (comment)), or mute the thread (https://github.com/notifications/unsubscribe-auth/AEJIOpmnMfMDjoRYN9vMy5QR940DTmxJks5q7IAygaJpZM4KhdeG).
from next.js.
Ok, if you write it like this, it will work
const Head = require('next/head').default
from next.js.
With Webpack you mean?
I like TypeScript and I will be happy enough when we can customise the Webpack configuration.
from next.js.
@skhavari your issue is a known module interop issue and adding '.default' is not needed.
Try telling TypeScript to emit 'es6' code (which webpack will pick up) and use 'node' modules resolution:
{
"compilerOptions": {
"target": "es6",
"moduleResolution": "node",
"jsx": "react"
},
"filesGlob": [
"pages/**/*.tsx"
]
}
I also add 'tsc' in my scripts like so:
...
"dev": "tsc && next",
"build": "tsc && next build",
"start": "tsc && next start"
...
from next.js.
@rossipedia I think the same can be achieve by having your own gulp file that compiles ts files and move them to the page dir where next picks them up and reloads them right?
from next.js.
@gozes I don't see why not. I've rarely used gulp, but from what I know of it that seems like a fairly standard use case.
from next.js.
@jagreehal That's really cool π― I'll have a look into adding the ignore config option in next.config.js.
from next.js.
@timneutkens thanks. Let me know if I can help adding config option in next.config.js.
from next.js.
from next.js.
@giacomorebonato awesome stuff! left you some review comments π°
from next.js.
Any suggestion on how to use TS with custom server? I wanted to use Express and have some trouble. Basically doing import next from "next"
fails with server.ts(2,18): error TS2307: Cannot find module 'next'.
so I guess I'm missing some typings, right?
--edit--
OK, got it working by specifying next version 2.0.0-beta
from next.js.
Related Issues (20)
- SWC panicks when processing nested `styled-jsx` tags HOT 1
- Code with a worker fails to build under the edge runtime, even if it's dead code.
- Runtime error in my local machine in rendering current time HOT 4
- Cdn problem with App Router HOT 1
- Values ββsent by headers in the middleware are not accepting letters with accents HOT 2
- Docker image ignores signals HOT 1
- Browser Navigation does not load correct page HOT 6
- The example from the documentation doesn't work. Link + [...catchAll] does not close modal window HOT 1
- The example from the documentation doesn't work. Link + [...catchAll] does not close modal window HOT 6
- Next.js cannot compile with turbo when lowlight is used HOT 5
- Screen flickers when setting cookies (server side)
- Docs: Resource Hints section contains `ReactDOM.prefetchDNS` method typo
- Inconsistent behavior with loading state (`loading.tsx`) and `useTransition`
- Problem with Next.js Turbo Mode and Non-English Characters. HOT 2
- 14.3.0-canary.28 fails with `node-module-in-edge-runtime` HOT 2
- Turbopack does not resolve "local" linked/file dependencies. HOT 1
- Failed to load plugin '@next/next declared in '--config >> eslint-config-next/core-web-vitals HOT 1
- next/font localFont can't resolve paths with import aliases
- Element type is invalid when building Next.js 14 project HOT 1
- LangChain not compatible with Next.js 14.2.x and causing error in server component rendering.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.