Steps:
- Following the tutorial
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/basics-final"
cd nextjs-blog
touch tsconfig.json
yarn add --dev typescript @types/react @types/node
mv components/date.js components/date.tsx
mv components/layout.js components/layout.tsx
mv lib/posts.js lib/posts.tsx
mv "pages/posts/[id].js" "pages/posts/[id].tsx"
mv pages/index.js pages/index.tsx
mv pages/_app.js pages/_app.tsx
mv pages/api/hello.js pages/api/hello.ts
yarn dev-
From Deploy static-rendered Next.js websites on Azure Static Web Apps, create temptory repo from template HERE and clone
-
In my-blog create a vanilla NextJS site
npx create-next-app@latest --ts # name=static-site- Using nextjs-starter, nextjs-blog and blog-starter as reference munge them into my-blog/static_site...
A. Setup prettier, playwright and setup export
yarn add -D prettier eslint eslint-config-prettier eslint-plugin-prettier
yarn add -D @playwright/test
yarn add --dev @types/react @types/nodeupdate package.json
"build": "next build && next export",
"lint": "next lint",
"fix": "next lint --fix",
"test": "playwright test",create file tests/example.spec.ts
import { test, expect } from "@playwright/test";
test("basic test", async ({ page }) => {
await page.goto("http://localhost:3000/");
const title = page.locator("title");
await expect(title).toHaveText("Create Next App");
});From nextjs-starter
Copy files:- .github to .. .prettierrc.json playwright.config.ts staticwebapp.config.json
update lint.yml and playwright.js.yml replaceing "npm" with "cd static-site && yarn" B. Deploy your static website
Commit and checkin code
In the "Azure Resource" VC plugin, right click "Static Web Apps" and select "Create Static Web App..."
name=my-blog
static-site
Western Europe
Custom
app location=/static-site
build output=out
C. Install tailwind css
yarn add -D postcss tailwindcss
npx tailwindcss init
npx tailwindcss-cli@latest initupdate tailwind.config.js
mode: 'jit',
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
darkMode: 'class',create postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};update next.config.js
swcMinify: false,
images: {
loader: "akamai",
path: "/",
},replace global.css
@tailwind base;
@tailwind components;
@tailwind utilities;update index.tsx
<div>
<head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</head>
<header>
<p>Header</p>
</header>
<main>
<h1>Welcome to <a href="https://nextjs.org">Next.js!</a></h1>
</main>
<footer>
<p>Footer</p>
</footer>
</div>D. Copy more stuff
From blog-starter
Copy:- @types interfaces
From nextjs-blog
Copy:- components lib pages/posts posts public/images
yarn add gray-matter remark remark-html date-fns
yarn add react-iconsFix lint and build errors....
Copy:- pages/index.tsx
Fix lint and build errors....
Commit and push (WIP)