Our Commitment to Open Source can be found here.
- Fork this repository to your own GitHub account and then clone it to your local device.
- Create a new branch:
git checkout -b MY_BRANCH_NAME
- Install yarn:
npm install -g yarn
- Install the dependencies:
yarn
- Run
yarn dev
to build and watch for code changes - In a new terminal, run
yarn types
to compile declaration files from TypeScript - The development branch is
canary
(this is the branch pull requests should be made against). On a release, the relevant parts of the changes in thecanary
branch are rebased intomaster
.
You may need to run
yarn types
again if your types get outdated.
To contribute to our examples, take a look at the “Adding examples” section.
Make sure you have chromedriver
installed for your Chrome version. You can install it with
brew install --cask chromedriver
on Mac OS Xchocolatey install chromedriver
on Windows- Or manually download the version that matches your installed chrome version (if there's no match, download a version under it, but not above) from the chromedriver repo and add the binary to
<next-repo>/node_modules/.bin
Running all tests:
yarn testonly
If you would like to run the tests in headless mode (with the browser windows hidden) you can do
yarn testheadless
If you would like to use a specific Chrome/Chromium binary to run tests you can specify it with
CHROME_BIN='path/to/chrome/bin' yarn testonly
Running a specific test suite inside of the test/integration
directory:
yarn testonly --testPathPattern "production"
Running just one test in the production
test suite:
yarn testonly --testPathPattern "production" -t "should allow etag header support"
Running examples can be done with:
yarn next ./test/integration/basic
# OR
yarn next ./examples/basic-css/
To figure out which pages are available for the given example, you can run:
EXAMPLE=./test/integration/basic
(\
cd $EXAMPLE/pages; \
find . -type f \
| grep -v '\.next' \
| sed 's#^\.##' \
| sed 's#index\.js##' \
| sed 's#\.js$##' \
| xargs -I{} echo localhost:3000{} \
)
-
In your app's
package.json
, replace:"next": "<next-version>",
with:
"next": "file:<local-path-to-cloned-nextjs-repo>/packages/next",
-
In your app's root directory, make sure to remove
next
fromnode_modules
with:rm -rf ./node_modules/next
-
In your app's root directory, run:
yarn
to re-install all of the dependencies.
Note that Next will be copied from the locally compiled version as opposed to from being downloaded from the NPM registry.
-
Run your application as you normally would.
-
To update your app's dependencies, after you've made changes to your local
next
repository. In your app's root directory, run:yarn install --force
When you add an example to the examples directory, don’t forget to add a README.md
file with the following format:
- Replace
DIRECTORY_NAME
with the directory name you’re adding. - Fill in
Example Name
andDescription
. - To add additional installation instructions, please add it where appropriate.
- To add additional notes, add
## Notes
section at the end. - Remove the
Deploy your own
section if your example can’t be immediately deployed to Vercel.
# Example Name
Description
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/DIRECTORY_NAME&project-name=DIRECTORY_NAME&repository-name=DIRECTORY_NAME)
## How to use
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
```bash
npx create-next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
# or
yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
```
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).