Instruction#
To begin with, navigate to the root directory of your NextJS application, and initialize the DDEV with the following:
1
2
| cd ./example-path-next-js-app
ddev config --project-name="next-js-example" --project-type=generic --webserver-type=generic
|
Then you will need to modify DDEV to:
- Run extra daemons using
web_extra_daemons - Expose the extra daemons port using
web_extra_exposed_ports (aka ddev-router)
Via appending th efollowing lines in the .ddev/config.yaml file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| ...
web_environment: []
corepack_enable: false
+ # NEXT.JS RELATED CONFIGURATION -- [ START ]
+ web_extra_daemons:
+ - name: "nextjs-site"
+ command: "npm install && npm run dev"
+ directory: "/var/www/html"
+ web_extra_exposed_ports:
+ - name: NextJS Eagle OCR
+ container_port: 3000
+ http_port: 9998
+ https_port: 9999
+ # NEXT.JS RELATED CONFIGURATION -- [ END ]
# Key features of DDEV's config.yaml:
# name: <projectname> # Name of the project, automatically provides
# http://projectname.ddev.site and https://projectname.ddev.site
...
|
Finally restart the DDEV project services and reveal the url of the new application:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| > ddev restart # or "ddev stop && ddev start"
> ddev describe
┌───────────────────────────────────────────────────────────────────────────────────────────┐
│ Project: next-eagle-ocr ~/example-path-next-js-app │
│ Docker platform: docker-desktop │
│ Router: traefik │
├──────────────┬──────┬────────────────────────────────────────────────┬────────────────────┤
│ SERVICE │ STAT │ URL/PORT │ INFO │
├──────────────┼──────┼────────────────────────────────────────────────┼────────────────────┤
│ web │ OK │ InDocker -> Host: │ generic │
│ │ │ - web:3000 -> 127.0.0.1:49289 │ Server: generic │
│ │ │ - web:8025 -> 127.0.0.1:49290 │ Docroot: '' │
│ │ │ │ Perf mode: mutagen │
│ │ │ │ Node.js: 22 │
├──────────────┼──────┼────────────────────────────────────────────────┼────────────────────┤
│ db │ OK │ InDocker -> Host: │ mariadb:10.11 │
│ │ │ - db:3306 -> 127.0.0.1:49291 │ User/Pass: 'db/db' │
│ │ │ │ or 'root/root' │
├──────────────┼──────┼────────────────────────────────────────────────┼────────────────────┤
│ Mailpit │ │ Mailpit: https://next-js-example.ddev.site:8026│ │
│ │ │ Launch: ddev mailpit │ │
├──────────────┼──────┼────────────────────────────────────────────────┼────────────────────┤
│ NextJS Eagle │ │ https://next-js-example.ddev.site:9999 │ │
│ OCR │ │ InDocker: web:3000 │ │
├──────────────┼──────┼────────────────────────────────────────────────┼────────────────────┤
│ Project URLs │ │ http://127.0.0.1:49289 │ │
└──────────────┴──────┴────────────────────────────────────────────────┴────────────────────┘
|
If the NextJS application is your primary focus, you may want to adjust the web_extra_exposed_ports setting to http:80 and https:443. This change allows you to access the application directly via its URL without needing to append the port number, as these are the default ports for HTTP and HTTPS.
Reference#