Update to Next.js 7.

This commit is contained in:
João Vieira
2018-09-24 19:20:01 +01:00
parent c121d008c4
commit b9c03395c0
11 changed files with 124 additions and 90 deletions
+10 -3
View File
@@ -19,6 +19,14 @@ export interface NextAppContext<Q extends DefaultQuery = DefaultQuery> {
ctx: NextContext<Q>;
}
/**
* Initial Props returned from base App class.
* https://github.com/zeit/next.js/blob/7.0.0/lib/app.js#L16
*/
export interface DefaultAppIProps {
pageProps: any;
}
/**
* Props passed to the App component.
* Component and pageProps are dynamic - cannot infer type.
@@ -28,7 +36,6 @@ export interface NextAppContext<Q extends DefaultQuery = DefaultQuery> {
export interface AppProps<Q extends DefaultQuery = DefaultQuery> {
Component: NextComponentType<any, any, NextContext<Q>>;
router: RouterProps<Q>;
pageProps: any;
}
/**
@@ -41,6 +48,6 @@ export interface AppProps<Q extends DefaultQuery = DefaultQuery> {
export type AppComponentType<IP = {}, C = NextAppContext> = NextComponentType<IP & AppProps, IP, C>;
export class Container extends React.Component {}
export default class App<P = {}> extends React.Component<P & AppProps> {
static getInitialProps(context: NextAppContext): Promise<{ pageProps: any }>;
export default class App<P = {}> extends React.Component<P & DefaultAppIProps & AppProps> {
static getInitialProps(context: NextAppContext): Promise<DefaultAppIProps>;
}
+1 -1
View File
@@ -1 +1 @@
export default function(): {serverRuntimeConfig: any, publicRuntimeConfig: any};
export default function(): { serverRuntimeConfig: any; publicRuntimeConfig: any };
+37 -21
View File
@@ -3,14 +3,9 @@ import { NextContext, NextComponentType } from ".";
import { DefaultQuery } from "./router";
export interface RenderPageResponse {
buildManifest: { [key: string]: any };
chunks: {
names: string[];
filenames: string[];
};
buildManifest: Record<string, any>;
html?: string;
head: Array<React.ReactElement<any>>;
errorHtml: string;
head?: Array<React.ReactElement<any>>;
}
export interface PageProps {
@@ -38,24 +33,42 @@ export interface NextDocumentContext<Q extends DefaultQuery = DefaultQuery> exte
}
/**
* Props passed to the Document component.
* Initial Props returned from base Document class.
* https://github.com/zeit/next.js/blob/7.0.0/server/document.js#L16
*/
export interface DocumentProps {
__NEXT_DATA__?: any;
dev?: boolean;
chunks?: {
names: string[];
filenames: string[];
};
html?: string;
head?: Array<React.ReactElement<any>>;
errorHtml?: string;
export interface DefaultDocumentIProps extends RenderPageResponse {
styles?: Array<React.ReactElement<any>>;
[key: string]: any;
}
/**
* Props passed to the Document component.
* https://github.com/zeit/next.js/blob/7.0.0/server/render.js#L165
*/
export interface DocumentProps<Q extends DefaultQuery = DefaultQuery> {
__NEXT_DATA__: {
props: any;
page: string;
pathname: string;
query: Q;
buildId: string;
assetPrefix?: string;
runtimeConfig?: any;
nextExport?: boolean;
err?: any;
};
dev: boolean;
dir?: string;
staticMarkup: boolean;
buildManifest: Record<string, any>;
devFiles: string[];
files: string[];
dynamicImports: string[];
assetPrefix: string;
}
/**
* Props supported by the Head component.
* https://github.com/zeit/next.js/blob/7.0.0/server/document.js#L42
*/
export interface HeadProps {
nonce?: string;
@@ -64,6 +77,7 @@ export interface HeadProps {
/**
* Props supported by the NextScript component.
* https://github.com/zeit/next.js/blob/7.0.0/server/document.js#L141
*/
export interface NextScriptProps {
nonce?: string;
@@ -86,6 +100,8 @@ export type DocumentComponentType<IP = {}, C = NextDocumentContext> = NextCompon
export class Head extends React.Component<HeadProps> {}
export class Main extends React.Component {}
export class NextScript extends React.Component<NextScriptProps> {}
export default class Document<P = {}> extends React.Component<P & DocumentProps> {
static getInitialProps(context: NextDocumentContext): DocumentProps;
export default class Document<P = {}> extends React.Component<
P & DefaultDocumentIProps & DocumentProps
> {
static getInitialProps(context: NextDocumentContext): DefaultDocumentIProps;
}
+13 -1
View File
@@ -1,2 +1,14 @@
import * as React from "react";
export default class extends React.Component<{ statusCode: number }> {}
import { NextContext } from ".";
/**
* Initial props returned from base Error class.
* https://github.com/zeit/next.js/blob/7.0.0/lib/error.js#L7
*/
export interface DefaultErrorIProps {
statusCode: number;
}
export default class Error<P = {}> extends React.Component<P & DefaultErrorIProps> {
static getInitialProps(context: NextContext): DefaultErrorIProps;
}
+1 -1
View File
@@ -1,7 +1,7 @@
import * as React from "react";
export function defaultHead(): JSX.Element[];
export default class extends React.Component {
export default class Head extends React.Component {
static canUseDOM: boolean;
static peek(): Array<React.ReactElement<any>>;
static rewind(): Array<React.ReactElement<any>>;
+7 -12
View File
@@ -1,4 +1,4 @@
// Type definitions for next 6.1
// Type definitions for next 7.0
// Project: https://github.com/zeit/next.js
// Definitions by: Drew Hays <https://github.com/dru89>
// Brice BERNARD <https://github.com/brikou>
@@ -16,7 +16,7 @@ import * as url from "url";
import { Response as NodeResponse } from "node-fetch";
import { SingletonRouter, DefaultQuery } from "./router";
import { SingletonRouter, DefaultQuery, UrlLike } from "./router";
declare namespace next {
// Deprecated
@@ -24,12 +24,10 @@ declare namespace next {
type ServerConfig = NextConfig;
// End Deprecated
type UrlLike = url.UrlObject | url.Url;
/**
* Context object used in methods like `getInitialProps()`
* https://github.com/zeit/next.js/blob/6.1.1/server/render.js#L77
* https://github.com/zeit/next.js/blob/6.1.1/readme.md#fetching-data-and-component-lifecycle
* https://github.com/zeit/next.js/blob/7.0.0/server/render.js#L97
* https://github.com/zeit/next.js/blob/7.0.0/README.md#fetching-data-and-component-lifecycle
*
* @template Q Query object schema.
*/
@@ -52,7 +50,7 @@ declare namespace next {
/**
* Next.js config schema.
* https://github.com/zeit/next.js/blob/6.1.1/server/config.js#L10
* https://github.com/zeit/next.js/blob/7.0.0/server/config.js#L9
*/
interface NextConfig {
webpack?: any;
@@ -74,7 +72,7 @@ declare namespace next {
/**
* Options passed to the Server constructor in Node.js.
* https://github.com/zeit/next.js/blob/6.1.1/server/index.js#L30
* https://github.com/zeit/next.js/blob/7.0.0/server/index.js#L25
*/
interface ServerOptions {
dir?: string;
@@ -89,7 +87,7 @@ declare namespace next {
*/
interface Server {
// From constructor
// https://github.com/zeit/next.js/blob/6.1.1/server/index.js#L30
// https://github.com/zeit/next.js/blob/7.0.0/server/index.js#L25
dir: string;
dev: boolean;
quiet: boolean;
@@ -105,7 +103,6 @@ declare namespace next {
distDir: string;
hotReloader: any;
buildId: string;
availableChunks: object;
generateETags: boolean;
runtimeConfig?: object;
};
@@ -172,9 +169,7 @@ declare namespace next {
): Promise<void>;
isServeableUrl(path: string): boolean;
readBuildId(): string;
handleBuildId(buildId: string, res: http.ServerResponse): boolean;
getCompilationError(): Promise<any>;
send404(res: http.ServerResponse): void;
}
/**
+7 -3
View File
@@ -1,8 +1,12 @@
import * as url from "url";
import * as React from "react";
import { UrlLike } from "./router";
export type UrlLike = url.UrlObject | url.Url;
export interface LinkState {
// Deprecated
export type LinkState = LinkProps;
// End Deprecated
export interface LinkProps {
prefetch?: boolean;
shallow?: boolean;
scroll?: boolean;
@@ -14,4 +18,4 @@ export interface LinkState {
children: React.ReactElement<any>;
}
export default class extends React.Component<LinkState> {}
export default class Link extends React.Component<LinkProps> {}
+12 -11
View File
@@ -1,14 +1,13 @@
import * as React from "react";
import * as url from "url";
type UrlLike = url.UrlObject | url.Url;
type EventName = 'routeChangeStart'
| 'routeChangeComplete'
| 'routeChangeError'
| 'beforeHistoryChange'
| 'hashChangeStart'
| 'hashChangeComplete';
type EventName =
| "routeChangeStart"
| "routeChangeComplete"
| "routeChangeError"
| "beforeHistoryChange"
| "hashChangeStart"
| "hashChangeComplete";
interface RouteChangeError {
cancelled: boolean;
@@ -17,6 +16,8 @@ interface RouteChangeError {
type EventHandler = (url: string) => any;
type ErrorEventHandler = (err: RouteChangeError, url: string) => any;
export type UrlLike = url.UrlObject | url.Url;
export interface EventChangeOptions {
shallow?: boolean;
[key: string]: any;
@@ -47,13 +48,13 @@ export interface RouterProps<Q = DefaultQuery> {
push(
url: string | UrlLike,
as?: string | UrlLike,
options?: EventChangeOptions,
options?: EventChangeOptions
): Promise<boolean>;
reload(route: string): Promise<void>;
replace(
url: string | UrlLike,
as?: string | UrlLike,
options?: EventChangeOptions,
options?: EventChangeOptions
): Promise<boolean>;
// events (deprecated soonish)
@@ -87,7 +88,7 @@ export interface WithRouterProps<Q = DefaultQuery> {
// without defining props explicitly
export function withRouter<T extends {}, Q = DefaultQuery>(
// tslint:disable-next-line:no-unnecessary-generics
Component: React.ComponentType<T & WithRouterProps<Q>>,
Component: React.ComponentType<T & WithRouterProps<Q>>
): React.ComponentType<T>;
declare const Router: SingletonRouter;
+19 -33
View File
@@ -1,47 +1,42 @@
import Document, { DocumentProps, Enhancer, Head, Main, NextScript, NextDocumentContext, PageProps } from 'next/document';
import Document, { Enhancer, Head, Main, NextScript, NextDocumentContext, PageProps } from 'next/document';
import * as React from "react";
const basicResults = (
<Document any="property" should="work" here>
<Head some="more" properties>
<meta name="description" content="Head can have children, too!" />
</Head>
<Main />
<NextScript />
</Document>
);
interface WithUrlProps {
url: string;
}
const withNonce = (
<Document>
<Head nonce="12345" />
<NextScript nonce="12345" />
</Document>
);
class MyDoc extends Document {
static async getInitialProps({ renderPage }: NextDocumentContext) {
class MyDoc extends Document<WithUrlProps> {
static getInitialProps({ req, renderPage }: NextDocumentContext) {
// without callback
const _page = renderPage();
// with callback
const enhancer: Enhancer<PageProps, {}> = (App) => (props) => (<App />);
const { html, head, errorHtml, chunks, buildManifest } = renderPage(enhancer);
const { html, head, buildManifest } = renderPage(enhancer);
const style = {};
const styles = [
<style />
];
return { html, head, errorHtml, chunks, buildManifest, style };
// Custom prop
const url = req!.url;
return { html, head, buildManifest, styles, url };
}
render() {
const { pathname, query } = this.props.__NEXT_DATA__;
return (
<html>
<Head>
<Head nonce="nonce" any="property" should="work" here>
<title>My page</title>
<style id='cxs-style' dangerouslySetInnerHTML={{ __html: this.props.style }} />
{ this.props.styles }
</Head>
<body>
<Main />
<NextScript />
<p>{this.props.url}</p>
{this.props.children}
</body>
</html>
@@ -49,15 +44,6 @@ class MyDoc extends Document {
}
}
const extendedResults = (
<MyDoc any="property" should="work" here>
<Head some="more" properties>
<meta name="description" content="Head can have children, too!" />
</Head>
<h1>Hey there</h1>
</MyDoc>
);
const renderPage: NextDocumentContext['renderPage'] = (enhancer) => ({
buildManifest: {},
chunks: { names: [], filenames: [] },
+17 -2
View File
@@ -1,4 +1,19 @@
import * as React from "react";
import ErrorComponent from "next/error";
import Error from "next/error";
const result = <ErrorComponent statusCode={404} />;
interface WithFooProps {
foo: string;
}
const result = <Error statusCode={404} />;
class MyError extends Error<WithFooProps> {
static getInitialProps() {
return { statusCode: 404, foo: 'bar'};
}
render() {
const { statusCode, foo } = this.props;
return <div>{statusCode} {foo}</div>;
}
}
-2
View File
@@ -77,9 +77,7 @@ function handle(req: http.IncomingMessage, res: http.ServerResponse) {
let b: boolean;
b = server.isServeableUrl("/path/to/thing");
b = server.handleBuildId("{buildId}", res);
const s: string = server.readBuildId();
server.getCompilationError().then(err => err.thisIsAnAny);
server.send404(res);
}