.. | ||
bin | ||
transforms | ||
.gitignore | ||
license.md | ||
package.json | ||
README.md | ||
tsconfig.json |
Next.js Codemod
This repository contains Codemod transformations to help upgrade Next.js codebases.
v9
name-default-component
Transforms anonymous components into named components to make sure they work with Fast Refresh.
For example
// my-component.js
export default function () {
return <div>Hello World</div>
}
Transforms into:
// 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/
Download the codemod:
curl -L https://github.com/zeit/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/name-default-component.js
Run the transformation:
npx jscodeshift -t ./name-default-component.js components/**/*.js
TypeScript files can use this codemod too:
npx jscodeshift -t ./name-default-component.js --parser=tsx components/**/*.tsx
If you have components in multiple folders, change the path to **/*.js
and add --ignore-pattern="**/node_modules/**"
.
After the transformation is done the name-default-component.js
file in the root of your project can be removed.
withamp-to-config
Transforms the withAmp
HOC into Next.js 9 page configuration.
For example:
// Before
import { withAmp } from 'next/amp'
function Home() {
return <h1>My AMP Page</h1>
}
export default withAmp(Home)
// 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/
Download the codemod:
curl -L https://github.com/zeit/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/withamp-to-config.js
Run the transformation:
npx jscodeshift -t ./withamp-to-config.js pages/**/*.js
After the transformation is done the withamp-to-config.js
file in the root of your project can be removed.
v6
url-to-withrouter
Tranforms 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
For example:
// From
import React from 'react'
export default class extends React.Component {
render() {
const { pathname } = this.props.url
return <div>Current pathname: {pathname}</div>
}
}
// 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.
Usage
Go to your project
cd path-to-your-project/
Download the codemod:
curl -L https://github.com/zeit/next-codemod/archive/master.tar.gz | tar -xz --strip=2 next-codemod-master/transforms/url-to-withrouter.js
Run the transformation:
npx jscodeshift -t ./url-to-withrouter.js pages/**/*.js
After the transformation is done the url-to-withrouter.js
file in the root of your project can be removed.
Authors
- Tim Neutkens (@timneutkens) – ZEIT
- Joe Haddad (@timer150) - ZEIT