If you previously configured routes in your now.json file for dynamic routes, these rules can be removed when leveraging Next.js 9's new Dynamic Routing feature.
Next.js 9's dynamic routes are automatically configured on Now and do not require any now.json customization.
You can read more about Dynamic Routing here.
\npages/_app.js)If you previously copied the Custom <App> example, you may be able to remove your getInitialProps.
Removing getInitialProps from pages/_app.js (when possible) is important to leverage new Next.js features!
The following getInitialProps does nothing and may be removed:
class MyApp extends App {\n // Remove me, I do nothing!\n static async getInitialProps({ Component, ctx }) {\n let pageProps = {}\n\n if (Component.getInitialProps) {\n pageProps = await Component.getInitialProps(ctx)\n }\n\n return { pageProps }\n }\n\n render() {\n // ... etc\n }\n}\n@zeit/next-typescript is no longer necessaryNext.js will now ignore usage @zeit/next-typescript and warn you to remove it. Please remove this plugin from your next.config.js.
Remove references to @zeit/next-typescript/babel from your custom .babelrc (if present).
Usage of fork-ts-checker-webpack-plugin should also be removed from your next.config.js.
TypeScript Definitions are published with the next package, so you need to uninstall @types/next as they would conflict.
The following types are different:
\n\n\nThis list was created by the community to help you upgrade, if you find other differences please send a pull-request to this list to help other users.
\n
From:
\nimport { NextContext } from 'next'\nimport { NextAppContext, DefaultAppIProps } from 'next/app'\nimport { NextDocumentContext, DefaultDocumentIProps } from 'next/document'\nto
\nimport { NextPageContext } from 'next'\nimport { AppContext, AppInitialProps } from 'next/app'\nimport { DocumentContext, DocumentInitialProps } from 'next/document'\nconfig key is now a special export on a pageYou may no longer export a custom variable named config from a page (i.e. export { config } / export const config ...).\nThis exported variable is now used to specify page-level Next.js configuration like Opt-in AMP and API Route features.
You must rename a non-Next.js-purposed config export to something different.
next/dynamic no longer renders \"loading...\" by default while loadingDynamic components will not render anything by default while loading. You can still customize this behavior by setting the loading property:
import dynamic from 'next/dynamic'\n\nconst DynamicComponentWithCustomLoading = dynamic(\n () => import('../components/hello2'),\n {\n loading: () => <p>Loading</p>,\n }\n)\nwithAmp has been removed in favor of an exported configuration objectNext.js now has the concept of page-level configuration, so the withAmp higher-order component has been removed for consistency.
This change can be automatically migrated by running the following commands in the root of your Next.js project:
\ncurl -L https://github.com/zeit/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js npx jscodeshift -t ./withamp-to-config.js pages/**/*.js\nTo perform this migration by hand, or view what the codemod will produce, see below:
\nBefore
\nimport { withAmp } from 'next/amp'\n\nfunction Home() {\n return <h1>My AMP Page</h1>\n}\n\nexport default withAmp(Home)\n// or\nexport default withAmp(Home, { hybrid: true })\nAfter
\nexport default function Home() {\n return <h1>My AMP Page</h1>\n}\n\nexport const config = {\n amp: true,\n // or\n amp: 'hybrid',\n}\nnext export no longer exports pages as index.htmlPreviously, exporting pages/about.js would result in out/about/index.html. This behavior has been changed to result in out/about.html.
You can revert to the previous behavior by creating a next.config.js with the following content:
// next.config.js\nmodule.exports = {\n exportTrailingSlash: true,\n}\n./pages/api/ is treated differentlyPages in ./pages/api/ are now considered API Routes.\nPages in this directory will no longer contain a client-side bundle.
next/dynamic has deprecated loading multiple modules at onceThe ability to load multiple modules at once has been deprecated in next/dynamic to be closer to React's implementation (React.lazy and Suspense).
Updating code that relies on this behavior is relatively straightforward! We've provided an example of a before/after to help you migrate your application:
\nBefore
\nimport dynamic from 'next/dynamic'\n\nconst HelloBundle = dynamic({\n modules: () => {\n const components = {\n Hello1: () => import('../components/hello1').then(m => m.default),\n Hello2: () => import('../components/hello2').then(m => m.default),\n }\n\n return components\n },\n render: (props, { Hello1, Hello2 }) => (\n <div>\n <h1>{props.title}</h1>\n <Hello1 />\n <Hello2 />\n </div>\n ),\n})\n\nfunction DynamicBundle() {\n return <HelloBundle title=\"Dynamic Bundle\" />\n}\n\nexport default DynamicBundle\nAfter
\nimport dynamic from 'next/dynamic'\n\nconst Hello1 = dynamic(() => import('../components/hello1'))\nconst Hello2 = dynamic(() => import('../components/hello2'))\n\nfunction HelloBundle({ title }) {\n return (\n <div>\n <h1>{title}</h1>\n <Hello1 />\n <Hello2 />\n </div>\n )\n}\n\nfunction DynamicBundle() {\n return <HelloBundle title=\"Dynamic Bundle\" />\n}\n\nexport default DynamicBundle\n