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 cask install 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/now):
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/DIRECTORY_NAME)
## How to use
### Using `create-next-app`
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
```
### Download manually
Download the example:
```bash
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/DIRECTORY_NAME
cd DIRECTORY_NAME
```
Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).