Merge branch 'canary' into fix_with_redux_persist_failure

.eslintignore

@@ -8,4 +8,8 @@ packages/next/compiled/**/*
 packages/react-refresh-utils/**/*.js
 packages/react-dev-overlay/lib/**
 **/__tmp__/**
-.github/actions/next-stats-action/.work
+.github/actions/next-stats-action/.work
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*
+packages/next-codemod/**/*.js
+packages/next-codemod/**/*.d.ts

.github/labeler.json

@@ -6,7 +6,8 @@
     "type: next": [
       "packages/next/**",
       "packages/react-dev-overlay/**",
-      "packages/react-refresh-utils/**"
+      "packages/react-refresh-utils/**",
+      "packages/next-codemod/**"
     ]
   }
 }

.prettierignore

@@ -8,4 +8,8 @@ packages/react-refresh-utils/**/*.d.ts
 packages/react-dev-overlay/lib/**
 **/__tmp__/**
 lerna.json
-.github/actions/next-stats-action/.work
+.github/actions/next-stats-action/.work
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*
+packages/next-codemod/**/*.js
+packages/next-codemod/**/*.d.ts

.prettierignore_staged

@@ -3,3 +3,5 @@
 **/dist/**
 packages/next/compiled/**/*
 lerna.json
+packages/next-codemod/transforms/__testfixtures__/**/*
+packages/next-codemod/transforms/__tests__/**/*

docs/advanced-features/codemods.md

@@ -0,0 +1,149 @@
+---
+description: Use codemods to update your codebase when upgrading Next.js to the latest version
+---
+
+# Next.js Codemods
+
+Next.js provides Codemod transformations to help upgrade your Next.js codebase when a feature is deprecated.
+
+Codemods are transformations that run on your codebase programmatically. This allows for a large amount of changes to be applied without having to manually go through every file.
+
+## Usage
+
+`npx @next/codemod <transform> <path>`
+
+- `transform` - name of transform, see available transforms below.
+- `path` - files or directory to transform
+- `--dry` Do a dry-run, no code will be edited
+- `--print` Prints the changed output for comparison
+
+## Next.js 9
+
+### `name-default-component`
+
+Transforms anonymous components into named components to make sure they work with [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
+
+For example
+
+```jsx
+// my-component.js
+export default function () {
+  return <div>Hello World</div>
+}
+```
+
+Transforms into:
+
+```jsx
+// my-component.js
+export default function MyComponent() {
+  return <div>Hello World</div>
+}
+```
+
+The component will have a camel cased name based on the name of the file, and it also works with arrow functions.
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Run the codemod:
+
+```
+npx @next/codemod name-default-component
+```
+
+### `withamp-to-config`
+
+Transforms the `withAmp` HOC into Next.js 9 page configuration.
+
+For example:
+
+```js
+// Before
+import { withAmp } from 'next/amp'
+
+function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export default withAmp(Home)
+```
+
+```js
+// After
+export default function Home() {
+  return <h1>My AMP Page</h1>
+}
+
+export const config = {
+  amp: true,
+}
+```
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Run the codemod:
+
+```
+npx @next/codemod withamp-to-config
+```
+
+## Next.js 6
+
+### `url-to-withrouter`
+
+Transforms the deprecated automatically injected `url` property on top level pages to using `withRouter` and the `router` property it injects. Read more here: [err.sh/next.js/url-deprecated](https://err.sh/next.js/url-deprecated)
+
+For example:
+
+```js
+// From
+import React from 'react'
+export default class extends React.Component {
+  render() {
+    const { pathname } = this.props.url
+    return <div>Current pathname: {pathname}</div>
+  }
+}
+```
+
+```js
+// To
+import React from 'react'
+import { withRouter } from 'next/router'
+export default withRouter(
+  class extends React.Component {
+    render() {
+      const { pathname } = this.props.router
+      return <div>Current pathname: {pathname}</div>
+    }
+  }
+)
+```
+
+This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](./transforms/__testfixtures__/url-to-withrouter).
+
+#### Usage
+
+Go to your project
+
+```
+cd path-to-your-project/
+```
+
+Run the codemod:
+
+```
+npx @next/codemod url-to-withrouter
+```

docs/getting-started.md

@@ -29,7 +29,7 @@ yarn create next-app
 
 After the installation is complete, follow the instructions to start the development server. Try editing `pages/index.js` and see the result on your browser.
 
-For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/create-next-app.md)
+For more information on how to use `create-next-app`, you can review the [`create-next-app` documentation](/docs/api-reference/create-next-app.md)
 
 ## Manual Setup
 

docs/manifest.json

@@ -176,6 +176,10 @@
             {
               "title": "Debugging",
               "path": "/docs/advanced-features/debugging.md"
+            },
+            {
+              "title": "Codemods",
+              "path": "/docs/advanced-features/codemods.md"
             }
           ]
         },
@@ -191,6 +195,10 @@
       "heading": true,
       "routes": [
         { "title": "CLI", "path": "/docs/api-reference/cli.md" },
+        {
+          "title": "Create Next App",
+          "path": "/docs/api-reference/create-next-app.md"
+        },
         {
           "title": "next/router",
           "path": "/docs/api-reference/next/router.md"

examples/with-filbert/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": ["macros"]
+  }

examples/with-filbert/package.json

@@ -12,8 +12,9 @@
   "author": "Kuldeep Keshwar",
   "license": "ISC",
   "dependencies": {
-    "@filbert-js/core": "^0.0.4",
-    "@filbert-js/server-stylesheet": "^0.0.4",
+    "@filbert-js/core": "latest",
+    "@filbert-js/macro": "latest",
+    "@filbert-js/server-stylesheet": "latest",
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"

examples/with-filbert/pages/index.js

@@ -1,11 +1,8 @@
-import { Global, styled } from '@filbert-js/core'
+import { Global, css, styled } from '@filbert-js/macro'
 
 import React from 'react'
 
-const Text = styled('div')`
-  color: hotpink;
-`
-const Heading = styled('h1')`
+const Heading = styled.h1`
   outline: none;
   text-decoration: none;
   font-weight: 300;
@@ -14,7 +11,6 @@ const Heading = styled('h1')`
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.01);
   padding: 0.4125em 1.25em;
   color: #3793e0;
-
   &:hover {
     border-bottom-color: #4682b4;
     border-bottom: 1px solid;
@@ -24,10 +20,10 @@ const Heading = styled('h1')`
     text-decoration: none;
   }
 `
-const Small = styled('div')`
+const Small = styled.div`
   color: black;
 `
-const Container = styled('div')`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -57,15 +53,25 @@ export default function Home() {
           
         `}
       />
-      <img src="/filbert.png" width="150" alt="filbert" />
+      <img
+        src="https://github.com/raw/kuldeepkeshwar/filbert-js/master/filbert.png"
+        width="150"
+        alt="filbert"
+      />
       <Heading>
         <a target="_black" href="https://filbert-js.vercel.app/">
           {' '}
           Welcome to Filbert!
         </a>
       </Heading>
       <Small>A light weight(~1KB) css-in-js solution(framework)🎨</Small>
-      <Text>Next JS is awesome</Text>
+      <div
+        css={css`
+          color: hotpink;
+        `}
+      >
+        Nextjs is awesome
+      </div>
     </Container>
   )
 }

examples/with-firebase-authentication/utils/auth/useUser.js

@@ -33,7 +33,7 @@ const useUser = () => {
     // Firebase updates the id token every hour, this
     // makes sure the react state and the cookie are
     // both kept up to date
-    firebase.auth().onIdTokenChanged((user) => {
+    const cancelAuthListener = firebase.auth().onIdTokenChanged((user) => {
       if (user) {
         const userData = mapUserData(user)
         setUserCookie(userData)
@@ -50,6 +50,10 @@ const useUser = () => {
       return
     }
     setUser(userFromCookie)
+
+    return () => {
+      cancelAuthListener()
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

examples/with-i18n-rosetta/lib/i18n.js

@@ -14,28 +14,10 @@ export const I18nContext = createContext()
 i18n.locale(defaultLanguage)
 
 export default function I18n({ children, locale, lngDict }) {
-  const [activeDict, setActiveDict] = useState(() => lngDict)
   const activeLocaleRef = useRef(locale || defaultLanguage)
   const [, setTick] = useState(0)
   const firstRender = useRef(true)
 
-  // for initial SSR render
-  if (locale && firstRender.current === true) {
-    firstRender.current = false
-    i18n.locale(locale)
-    i18n.set(locale, activeDict)
-  }
-
-  useEffect(() => {
-    if (locale) {
-      i18n.locale(locale)
-      i18n.set(locale, activeDict)
-      activeLocaleRef.current = locale
-      // force rerender
-      setTick((tick) => tick + 1)
-    }
-  }, [locale, activeDict])
-
   const i18nWrapper = {
     activeLocale: activeLocaleRef.current,
     t: (...args) => i18n.t(...args),
@@ -44,13 +26,26 @@ export default function I18n({ children, locale, lngDict }) {
       activeLocaleRef.current = l
       if (dict) {
         i18n.set(l, dict)
-        setActiveDict(dict)
-      } else {
-        setTick((tick) => tick + 1)
       }
+      // force rerender to update view
+      setTick((tick) => tick + 1)
     },
   }
 
+  // for initial SSR render
+  if (locale && firstRender.current === true) {
+    firstRender.current = false
+    i18nWrapper.locale(locale, lngDict)
+  }
+
+  // when locale is updated
+  useEffect(() => {
+    if (locale) {
+      i18nWrapper.locale(locale, lngDict)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lngDict, locale])
+
   return (
     <I18nContext.Provider value={i18nWrapper}>{children}</I18nContext.Provider>
   )

examples/with-i18n-rosetta/pages/[lng]/index.js

@@ -19,7 +19,7 @@ const HomePage = () => {
       <h2>{i18n.t('intro.text')}</h2>
       <h3>{i18n.t('intro.description')}</h3>
       <div>Current locale: {i18n.activeLocale}</div>
-      <Link href="/de">
+      <Link href="/[lng]" as="/de">
         <a>Use client-side routing to change language to 'de'</a>
       </Link>
     </div>

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "9.5.2-canary.9"
+  "version": "9.5.2"
 }