staticwebdev / nextjs-starter Goto Github PK
View Code? Open in Web Editor NEWA Next.js starter application for deploying to Azure Static Web Apps
Home Page: https://docs.microsoft.com/azure/static-web-apps/deploy-nextjs
A Next.js starter application for deploying to Azure Static Web Apps
Home Page: https://docs.microsoft.com/azure/static-web-apps/deploy-nextjs
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.:
.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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.