Search code examples
reactjsazurenext.jsapp-router

NEXT page router deploy to Azure

I have a NEXT project to upload to Azure Web App, but let's get to the tests/cases.

1.: I ran the NEXT (App Router) build and uploaded the build files, without success, giving the 404 error or missing file in the Root. I uploaded this Build through FileZila and also through the VS Code Azure extension, but in both ways, the error was the same.

2.: I ran the NEXT (Page Router) build and also uploaded the build files following the same behavior as in description 1, but with the same result.

3.: I ran the build of a project with React Puro (react app) and got the Build files, uploaded it and it worked.

However, for NEXT I followed the video https://www.youtube.com/watch?v=hZ_8TARnSQI and even though I followed exactly what the guy does in the video, I was not successful.

What catches the most attention is that the guy uploads a clean installation of NEXT with Page Router and I also tried that, but without success, at no point did I see him uploading the build.

The question is, has anyone been through the same thing or has experience uploading things to Azure Web App?

Thanks guys, good weekend to everyone.

I ran the build of a project with React Puro (react app) and got the Build files, uploaded it and it worked.

Solution

  • The question is, has anyone been through the same thing or has experience uploading things to Azure Web App?

    I have reproduced the above requirement. Follow the below steps.

    • Open your terminal or command prompt and Navigate to the directory where you want to create your Next.js project.
    npx create-next-app my-nextjs-app

(Or)

yarn create next-app my-nextjs-app

    enter image description here

    Now, here we can see the NEXT js project created. Then you can configure the routing as per your requirement.

    Run cmd:

    npm run dev

(or)

yarn dev

    enter image description here

    Then, we can deploy directly using Azure core tools extension installation in VS code editor.

    enter image description here

    • Login with the azure credentials and go to the App service create a new webapp with node Runtime & click on create.

    enter image description here

    Nextappsample is webapp which I created in the azure portal to deploy my my-nextjs-app from local.

    Deployment status: enter image description here

    Nextjs app: enter image description here