This PR updates all example Dockerfiles that were using `node:18-alpine`
to `node:20-alpine`
to align with current LTS and address known issues in Node 18 images.
- examples/with-docker/Dockerfile
- examples/with-docker-compose/next-app/prod.Dockerfile
- examples/with-docker-compose/next-app/dev.Dockerfile
- examples/with-docker-multi-env/docker/development/Dockerfile
- examples/with-docker-multi-env/docker/production/Dockerfile
- examples/with-docker-multi-env/docker/staging/Dockerfile
I verified local builds for each example. No behavior changes;
docs/examples only.
https://github.com/vercel/next.js/issues/78465
---------
Co-authored-by: Joseph <joseph.chamochumbi@vercel.com>
## What?
Update examples `.gitignore` files for parity with [Yarn's official
recommendations](https://v3.yarnpkg.com/getting-started/qa#which-files-should-be-gitignored),
accounting for Yarn's modern Plug-n-Play functionality.
## Why?
New projects initialized with `create-next-app` presently add various
extraneous files from the Yarn cache to the initial commit. This is most
notable in the case of the Next SWC binary, which may exceed 100M in
some environments (empirically, 64-bit Darwin and WSL2 Ubuntu, and very
probably other unix/linux environments), and prevent users from pushing
their new projects to free GitHub repositories without rewriting the
commit history to exclude the extraneous files, or unnecessarily setting
up Git LFS to include them.
## How?
I have errored on the side of exclusion to enable users to push their
CNA projects to GitHub as-is and for parity with other package managers,
while still providing the opportunity to opt in to additional
functionality provided by modern Yarn.
These changes follow the recommendations for
**non**-[Zero-Install](https://yarnpkg.com/features/caching#zero-installs)
configurations, as Zero-Install functionality is an extension on top of
the base package manager experience, and may necessitate additional
configuration and present additional complications for unsuspecting
users, so I think it's best left up to the user to opt-in. On account of
the majority of publicly available Next.js-based projects comprising
general consumer-facing websites, it is my belief that the majority of
Next projects would not benefit from Yarn's Zero-Install functionality,
and that explicitly facilitating it by default would break status quo
with all other non-Yarn CNA projects.
Contrary to the example `.gitignore`s provided by Yarn, I've excluded
the `.yarn/sdks` directory as it contains IDE-specific tooling; I feel
it would be presumptuous for an environmentally-agnostic tool to target
and provide package-manager-specific tooling for specific editors. This
too should be left to the user to opt-in to and provide for their
project if they deem necessary.
I have retained the current `.gitignore`'s exclusion of the `/.pnp`
directory for backwards compatibility with older versions of Yarn (the
files therein have since been reallocated to the `.yarn` directory
addressed by these changes, but I am not clear on when that delineation
occurred or the prevalence of Yarn installations which depend on the
former convention). Maintaining the exclusion here, in the worst case,
implies additional downloads (on an order of magnitude merely similar to
using npm from the outset) rather than failure.
CC: @samcx
### Adding or Updating Examples
- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
Co-authored-by: Sam Ko <sam@vercel.com>
### Description:
This PR continues the work started in
[#72064](https://github.com/vercel/next.js/pull/72064) (already merged)
by updating the Dockerfiles in the `examples` folder to include the
`.npmrc` file in the dependency copy command.
### Original Command:
```dockerfile
# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
```
### Updated Command:
```dockerfile
# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
```
### Reason for Change:
Including `.npmrc` allows for custom npm configurations, such as
`legacy-peer-deps=true`. Without this option, some installations can
fail due to unresolved peer dependencies, particularly for projects with
older dependencies.
This update ensures that any additional configurations specified in
`.npmrc` are applied during installation, improving Docker build
consistency and stability for projects with custom npm requirements.
### Diff:
```diff
- COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+ COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
```
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
## For Contributors
### Improving Documentation
- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide
### Adding or Updating Examples
- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md
### Fixing a bug
- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
### Adding a feature
- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md
## For Maintainers
- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change
-->
### What?
Update the docker with multiple env examples by the correct hostname.
### Why?
I am verry happy when I see this example, I need to deploy a project
with multiple environments,
I tested current example for my machine, but it started but it didn't
connect to app.
I really try this example
https://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env.
but it doesn't connect to nextjs container because the hostname
configuation is incorrect.
### How?
I created this PR to change hostname from host ```localhost``` to
```0.0.0.0``` in docker with multiple environments
Closes NEXT-
No fixing any issues
Co-authored-by: JJ Kasper <jj@jjsweb.site>
### What?
Update docker examples to correctly set HOSTNAME env variable for
standalone output
Related to PR:
https://github.com/vercel/next.js/pull/52804
### Why?
### TL;DR
The dockerfiile examples need to modified as that contains HOSTNAME
setting that apparently is not working as expected.
Related to Issue:
https://github.com/vercel/next.js/issues/58657
Affected examples:
https://github.com/vercel/next.js/tree/canary/examples/with-dockerhttps://github.com/vercel/next.js/tree/canary/examples/with-docker-multi-env
### Longer explanations
Based on [Docker
document](https://docs.docker.com/engine/reference/builder/#environment-replacement):
> You can also use environment variables with RUN, CMD, and ENTRYPOINT
instructions, but in those cases the variable substitution is handled by
the command shell, not the builder.
It means that when executing the last CMD ( `node server.js` ) in
Dockerfile samples, the HOSTNAME defined by prior `ENV` instruction is
simply ignored.
This causes problems typically when the host process sets HOSTNAME -
e.g. for instance when using AWS Fargate for deployment [we can't have
control over HOSTNAME](https://stackoverflow.com/a/52871552) set by the
host process. (also refer to the issue #58657 above)
### How?
Updated Dockerfilie samples, by setting HOSTNAME directly in CMD
instruction that launches nextjs server, not in the builder process.
Used this setting at my end (with AWS Fargate) to confirm that it fixes
the network problem.
Closes NEXT-
Fixes#58657
Co-authored-by: Sam Ko <sam@vercel.com>
## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
### Reason for making this change
https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again.
In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited.
### Remaining work
I apologize for only modifying one template initially to initiate the discussion first.
If this change is agreed upon, it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change.
This PR updates the minimum version of React used by examples from 17.0.2 to 18.2.0.
Fixes#41975
## Bug
- [x] Related issues linked using `fixes #41975`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Let's open the deploy link in a new window so the link isn't blocked
when running an an iframe, such as Stackblitz.
Previously, this would print the following error:
> Refused to display 'https://vercel.com/' in a frame because it set
'X-Frame-Options' to 'deny'
<!--
Thanks for opening a PR! Your contribution is much appreciated.
In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->
## Summary
- Added jsdoc typing for all examples using `next.config.js`
- Added jsdoc typing for all examples using `tailwind.config.js`
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
the directory `/app/.next/standalone` already contains a copy of the package.json so we can skip copying it before we copy the standalone dir
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
The commit https://github.com/vercel/next.js/commit/0a781dd67510b679db178b17e30a1a06bb912398 changes the docker examples to use `if..elif..else`
it is working fine tor the `with-docker` example, but not working for the `with-docker-compose` and `with-docker-multi-env` examples due to a missing semicolon.
Fix#39085
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
This PR updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
---
## Context
Having 3 environments:
- Development: for doing testing
- Staging: for doing UAT testing
- Production: for users
In each environment, the Next.js application makes API calls to the corresponding API gateway:
- Development: https://api-development.com
- Staging: https://api-staging.com
- Production: https://api-production.com
Using `NEXT_PUBLIC_API_URL` for the `baseUrl` of [axios](https://axios-http.com/docs/intro).
Since the `NEXT_PUBLIC_API_URL` is replaced during _build time_, we have to manage to provide the corresponding `.env.production` files for Docker at _build time_ for each environment.
## Solution
Since we are using CI services for dockerization, we could setup the CI to inject the correct `.env.production` file into the cloned source code, (this is actually what we did). Doing that would require us to touch the CI settings.
Another way is using multiple Dockerfile (the former only need to use one Dockerfile), and the trick is copying the corresponding `env*.sample` and rename it to `.env.production` then putting it into the Docker context. Doing this way, everything is managed in the source code.
```
> Dockerfile
# Development environment
COPY .env.development.sample .env.production
# Staging environment
COPY .env.staging.sample .env.production
# Production environment
COPY .env.production.sample .env.production
```
Testing these images locally is also simple, by issuing the corresponding Makefile commands we can simulate exactly how the image will be built in the CI environment.
## How to use
For development environment:
```
make build-development
make start-development
```
For staging environment:
```
make build-staging
make start-staging
```
For production environment:
```
make build-production
make start-production
```
## Conclusion
This example shows one way to solve the three-environment model in software development when building a Next.js application. There might be another better way and I would love to know about them as well.
I'm making this example because I can't find any example about this kind of problem.
Co-authored-by: Tú Nguyễn <93700515+tunguyen-ct@users.noreply.github.com>
JUNAID ALI KHAN