iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
👋

Configuring React and Next.js with Deno 2.0 RC

に公開
Next.js
React
Deno
frontend
tech

Summary

Try setting up React and Next.js environments in Deno 2.0 rc.4.

Introduction

Deno 2.0 will be released soon. Currently, the RC (release candidate) is available, and feedback is being requested.
I am also trying out several environments with Deno 2.0 and recording my findings.

Who is this article for?

This article is for people who want to try building application execution environments using Deno.

How to read this document

Any missing information can be found in the "References" section.
Deno beginners should look for and read supplementary information in other documents.
Please take actions such as searching or participating in the community as necessary.

Main Content

The general strategy is as follows.

  1. In deno.json, set nodeModulesDir to manual instead of the default none. Deno 2.0 Release Candidate
  2. Use Deno's equivalent command to run: deno add npm:next@latest npm:react@latest npm:react-dom@latest.
    • Since Deno provides its own TypeScript execution environment, type definitions are installed using --dev.

Preparation

In my case, I am testing by creating a container environment with incus, installing Deno, and then upgrading it to the Deno 2.0 release candidate.

$ deno --version
deno 2.0.0-rc.4 (release candidate, release, x86_64-unknown-linux-gnu)
v8 12.9.202.13-rusty
typescript 5.6.2

I have created a src directory for a general user and assigned the location etude-react/first for my experiments.

Deno Initial Configuration

Create a deno.json file with the following content.

deno.json
{
  "nodeModulesDir": "manual",
}

Environment Setup with deno add

  • Install the necessary packages as follows.
$ deno add npm:next@latest npm:react@latest npm:react-dom@latest
Add npm:next@14.2.13
Add npm:react@18.3.1
Add npm:react-dom@18.3.1
deno.json
{
  "nodeModulesDir": "manual",
  "imports": {
    "next": "npm:next@^14.2.13",
    "react": "npm:react@^18.3.1",
    "react-dom": "npm:react-dom@^18.3.1"
  }
}

deno add --dev npm:@types/react npm:@types/node npm:typescript
Add npm:@types/react@18.3.8
Add npm:@types/node@22.5.5
Add npm:typescript@5.6.2
deno.json
{
  "nodeModulesDir": "manual",
  "imports": {
    "@types/node": "npm:@types/node@^22.5.5",
    "@types/react": "npm:@types/react@^18.3.8",
    "next": "npm:next@^14.2.13",
    "react": "npm:react@^18.3.1",
    "react-dom": "npm:react-dom@^18.3.1",
    "typescript": "npm:typescript@^5.6.2"
  }
}

A deno.lock file, similar to package-lock.json, has also been created. Of course, the packages are also stored in the node_modules/ directory.

ls -la
total 12
drwxr-xr-x 1 yabuki yabuki   60 Sep 22 14:22 .
drwxr-xr-x 1 yabuki yabuki   10 Sep 22 13:51 ..
-rw-r--r-- 1 yabuki yabuki  161 Sep 22 14:21 deno.json
-rw-r--r-- 1 yabuki yabuki 6023 Sep 22 14:22 deno.lock
drwxr-xr-x 1 yabuki yabuki   54 Sep 22 14:22 node_modules

$ ls -la node_modules/
total 12
drwxr-xr-x 1 yabuki yabuki  54 Sep 22 14:22 .
drwxr-xr-x 1 yabuki yabuki  60 Sep 22 14:22 ..
drwxr-xr-x 1 yabuki yabuki  44 Sep 22 14:22 .bin
drwxr-xr-x 1 yabuki yabuki 872 Sep 22 14:22 .deno
lrwxrwxrwx 1 yabuki yabuki  36 Sep 22 14:22 next -> .deno/next@14.2.13/node_modules/next
lrwxrwxrwx 1 yabuki yabuki  37 Sep 22 14:22 react -> .deno/react@18.3.1/node_modules/react
lrwxrwxrwx 1 yabuki yabuki  45 Sep 22 14:22 react-dom -> .deno/react-dom@18.3.1/node_modules/react-dom

Define the scripts to be executed in deno.json. Pay attention to the tasks in the example below.

deno.json
{
  "nodeModulesDir": "manual",
  "tasks": {
    "dev": "deno run -A npm:next dev",
    "build": "deno run -A npm:next build",
    "start": "deno run -A npm:next start",
    "lint": "deno run -A npm:next lint"
  },
  "imports": {
    "@types/node": "npm:@types/node@^22.5.5",
    "@types/react": "npm:@types/react@^18.3.8",
    "next": "npm:next@^14.2.13",
    "react": "npm:react@^18.3.1",
    "react-dom": "npm:react-dom@^18.3.1",
    "typescript": "npm:typescript@^5.6.2"
  }
}

Task Configuration

Once configured, Deno recognizes the tasks as follows.

$ deno task
Available tasks:
- dev
    deno run -A npm:next dev
- build
    deno run -A npm:next build
- start
    deno run -A npm:next start
- lint
    deno run -A npm:next lint

Running Sample Code

Create the app directory with mkdir app.
Then, create layout.tsx and page.tsx as exemplified by Tohoho-san.

Run and Try Accessing

$ deno task dev
Task dev next dev
  ▲ Next.js 14.2.13
  - Local:        http://localhost:3000

 ✓ Starting...

   We detected TypeScript in your project and created a tsconfig.json file for you.
 ✓ Ready in 1650ms
 ○ Compiling / ...
 ✓ Compiled / in 3.5s (432 modules)
 GET / 200 in 3987ms

I confirmed that it displays correctly when accessed via a browser.

Additional Notes

Issues with This Article

There are two points.

Permission Settings in Deno

If you are properly considering Deno's permissions, you should avoid using deno run -A when executing tasks and instead allow only the necessary permissions. For this article, the goal was simply to get it running and get a feel for it, so I've kept it broad and loose.

Operation Confirmation

It worked. However, as an engineer, I am aware there is a gap between "it worked" and "it is configured correctly." I expect others will continue to try this out, write articles, and we will all improve together.

Particularly, I am concerned about introducing TypeScript as a dependency even though Deno is the TypeScript execution environment.

The error that occurred (which, of course, does not occur after running deno add --dev npm:typescript):

$ deno task dev
Task dev deno run -A npm:next dev
  ▲ Next.js 14.2.13
  - Local:        http://localhost:3000

 ✓ Starting...
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Installing dependencies

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).


Installing devDependencies (npm):
- typescript

error: Uncaught Error: spawnSync npm ENOENT
    at __node_internal_captureLargerStackTrace (ext:deno_node/internal/errors.ts:93:9)
    at __node_internal_errnoException (ext:deno_node/internal/errors.ts:141:10)
    at _createSpawnSyncError (ext:deno_node/internal/child_process.ts:683:17)
    at new ChildProcess (ext:deno_node/internal/child_process.ts:285:13)
    at Object.spawn (node:child_process:118:10)
    at spawn (file:///home/yabuki/src/etude-react/second/node_modules/.deno/next@14.2.13/node_modules/next/dist/compiled/cross-spawn/index.js:1:370)
    at file:///home/yabuki/src/etude-react/second/node_modules/.deno/next@14.2.13/node_modules/next/dist/lib/helpers/install.js:82:47
    at new Promise (603canonymous603e)
    at install (file:///home/yabuki/src/etude-react/second/node_modules/.deno/next@14.2.13/node_modules/next/dist/lib/helpers/install.js:27:14)
    at installDependencies (file:///home/yabuki/src/etude-react/second/node_modules/.deno/next@14.2.13/node_modules/next/dist/lib/install-dependencies.js:31:36)
error: Uncaught (in promise) TypeError: Unknown signal: 0
    at toDenoSignal (ext:deno_node/internal/child_process.ts:387:11)
    at ChildProcess.kill (ext:deno_node/internal/child_process.ts:296:53)
    at handleSessionStop (file:///home/yabuki/src/etude-react/second/node_modules/.deno/next@14.2.13/node_modules/next/dist/cli/next-dev.js:84:51)
    at ChildProcess.603canonymous603e (file:///home/yabuki/src/etude-react/second/node_modules/.deno/next@14.2.13/node_modules/next/dist/cli/next-dev.js:253:23)
    at ChildProcess.emit (ext:deno_node/_events.mjs:393:28)
    at ext:deno_node/internal/child_process.ts:275:16
    at eventLoopTick (ext:core/01_core.js:175:7)

As a Side Note: Running tsc with Deno

I'm not exactly sure what the significance of this is, but I tried it and it worked.

$ deno run -A npm:typescript/tsc -v
Version 5.6.2

References

Conclusion

Subject Date
Date written 2024-09-22
Date modified 2024-09-26

The above information was included by the author to help judge the freshness of this article.

For a detailed change history, please refer to:
GitHub - yabuki/friendly-potato: zenn-contents

I would appreciate it if you could submit pull requests for typos or other suggestions. I will decide whether to accept them based on the diff and the description in the pull request.





GitHubで編集を提案

Discussion