staticwebdev / nextjs-starter Goto Github PK

Hi,
I'm not a next.js expert so I hope you'll forgive any stupid things I will ask :)

Currently it uses next export to build the static website and it doesn't support the <img> HTML tag.
So I replaced it with the next.js Image API:

import SmallCard from '../components/SmallCard';
import { projectIcons } from '../components/Icons';

import { projects } from '../utils/projectsData';
import Image from 'next/image';

const Home = () => (
  <div className="home">
    <Image
      src="/images/logo-transparent.png"
      alt="logo"
      width={250}
      height={118}
    />
    <h1>What Can I Deploy to Static Apps?</h1>
...

But the next export requires an Image optimizer service so I used a dummy one

import SmallCard from '../components/SmallCard';
import { projectIcons } from '../components/Icons';

import { projects } from '../utils/projectsData';
import Image from 'next/image';

// opt-out of image optimization, no-op
const customLoader = ({ src }) => {
  return src;
};

const Home = () => (
  <div className="home">
    <Image
      src="/images/logo-transparent.png"
      alt="logo"
      width={250}
      height={118}
      loader={customLoader}
    />
    <h1>What Can I Deploy to Static Apps?</h1>
...

That works but that's a pretty bad workaround I guess.

Is there an Azure service or another way to support static local images ?

Thanks !

I was getting this error (below) when trying to run "npm run dev". I've tried editing the next.config.js file, as recommended by others elsewhere for this error, but that didn't seem to work.

However, by using an older repo version, "npm run dev" did work for me. In my case, I found success with this older version: https://github.com/staticwebdev/nextjs-starter/tree/07f056ef5d0b73283522cbbf533b403dbb300a4f.

Following the tutorial at https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs causes the github action/build Playwright tests to fail on the steps "store reports" and "notify dashboard". I'm not familiar with these actions, but it looks like there is some publishing going on to mspnp/intern-js-pipeline which I'm assuming all users don't have access to.

...
    - name: Publish to external repo
      if: always()
      uses: peaceiris/[email protected]
      with:
        external_repository: mspnp/intern-js-pipeline
        publish_branch: gh-pages
        personal_token: ${{ secrets.PAT_TOKEN }}
        publish_dir: ${{steps.download.outputs.download-path}}
        destination_dir: test-reports/${{ github.repository }}
        keep_files: true
        user_name: "github-actions[bot]"
        user_email: "github-actions[bot]@users.noreply.github.com"
...

Related PR: #34

Misc.:

• The forked repository is a private repository
• Setup between github and Azure Static Web App works fine, and the workflow in .github\workflow\azure-static-web-apps-<random>.yml deploys the static code to both production and preview deployments fine.

Let me know if you need any more input.

Routing doesn't work in this example when deployed on static web apps.

There is no routes.json file, so no matter what url you enter into the address bar, it will always serve you with the main index.html homepage.

This doesn't use Next.js export functionality which produces a statically generated site like Gatsby.js.

I could be wrong but it seems like the predominant use case for combining Next.js with Azure Static Web Apps, would be if you were using Next export to generate a static site.

When using Windows Powershell, I got 'Internal Server Error' when I ran npm run dev. I ended up solving the problem by finding this thread here:

vercel/next.js#16535 (comment)