[A-00244] FullStack Webアプリケーションを作る(Django+Next.js)

フルスタックアプリケーションを作成します。

・フロントエンドを作成する

まずnext.jsプロジェクトを作成します。

npx create-next-app@latest

アプリケーションの名前はfrontendです。

cd frontend
mkdir .devcontainer
cd .devcontainer
touch devcontainer.json Dockerfile

Devcontainerを利用します。

{
    "name": "Next App",
    "build": {
        "dockerfile": "Dockerfile"
    },
    "remoteUser": "node"
}

FROM node:20-slim

RUN apt update && apt install -y less man-db sudo

ARG USERNAME=node
RUN echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
    && chmod 0440 /etc/sudoers.d/$USERNAME

ENV DEVCONTAINER=true

Devcontainerに入ってnode_modules配下のファイルを削除してライブラリを再インストールします。

cd node_modules
rm -rf .package-lock.json 
npm i