Implement simple blog with Next.js

fullstack/fullstack/.editorconfig

@@ -0,0 +1,30 @@
+# EditorConfig is awesome: https://editorconfig.org
+
+# Top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+[*.{js,jsx,ts,tsx,json}]
+charset = utf-8
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 4
+
+# Ignore minified JavaScript files
+[**.min.js]
+indent_style = ignore
+
+# Denote filenames that should be used as they are without any conversion
+[*.{md,html,css,scss}]
+indent_style = unset

fullstack/fullstack/.github/dependabot.yml

@@ -0,0 +1,14 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: daily
+    commit-message:
+      prefix: 'deps'

fullstack/fullstack/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

fullstack/fullstack/.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps = true

fullstack/fullstack/.prettierignore

@@ -0,0 +1,4 @@
+README.MD
+CHANGELOG.md
+node_modules/
+.next/

fullstack/fullstack/.prettierrc

@@ -0,0 +1,30 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "bracketSameLine": true,
+  "jsxSingleQuote": true,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "endOfLine": "auto",
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "importOrder": [
+    "^react$",
+    "^next(/.*)?$",
+    "next-themes",
+    "@/*",
+    "<THIRD_PARTY_MODULES>"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
+}

fullstack/fullstack/Dockerfile

@@ -0,0 +1,68 @@
+FROM node:22.15.0-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY --link package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci --legacy-peer-deps; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=deps --link /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN \
+  if [ -f yarn.lock ]; then yarn run build; \
+  elif [ -f package-lock.json ]; then npm run build; \
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]

fullstack/fullstack/Dockerfile.bun

@@ -0,0 +1,55 @@
+FROM oven/bun:1.2.10-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile --production
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN bun run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:bun .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:bun /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:bun /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+CMD ["bun", "server.js"]

fullstack/fullstack/README.md

@@ -0,0 +1,103 @@
+# Next.js 16 Starter
+
+Welcome to the **Next.js 16 Starter** repository! This starter template is built with Next.js 16, React 19, TypeScript 5, Tailwind CSS 4, React Compiler and comes packed with several powerful tools and configurations to accelerate your project setup and streamline development workflows using VS Code.
+
+## 🚀 What's Included
+
+- **Next.js 16**
+- **React 19**
+- **TypeScript 5**
+- **ESLint 9**
+- **Prettier 3**
+- **Tailwind CSS 4**
+- **App Directory**
+- **React Compiler**
+- **Dockerfile** with Node.js 22.15.0 (Alpine)
+- **Dockerfile.bun** with Bun 1.2.10 (Alpine)
+
+### 🛠️ ESLint Plugins
+
+- [**@eslint/js**](https://www.npmjs.com/package/@eslint/js)
+- [**typescript-eslint**](https://github.com/typescript-eslint/typescript-eslint)
+- [**eslint-plugin-react**](https://github.com/jsx-eslint/eslint-plugin-react)
+- [**@next/eslint-plugin-next**](https://github.com/vercel/next.js/tree/canary/packages/eslint-plugin-next)
+- [**eslint-config-prettier**](https://github.com/prettier/eslint-config-prettier)
+- [**eslint-plugin-import**](https://github.com/import-js/eslint-plugin-import)
+- [**eslint-plugin-promise**](https://github.com/eslint-community/eslint-plugin-promise)
+- [**@tanstack/eslint-plugin-query**](https://github.com/TanStack/query/tree/main/packages/eslint-plugin-query)
+- [**eslint-plugin-unused-imports**](https://github.com/sweepline/eslint-plugin-unused-imports)
+- [**globals**](https://github.com/sindresorhus/globals)
+
+### ✨ Prettier Plugins
+
+- [**@trivago/prettier-plugin-sort-imports**](https://github.com/trivago/prettier-plugin-sort-imports)
+- [**prettier-plugin-tailwindcss**](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
+
+### 💻 VS Code Extensions (Recommended)
+
+To enhance development experience, install the following VS Code extensions:
+
+- [**Auto Close Tag**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
+- [**Better Comments**](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
+- [**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
+- [**EditorConfig for VS Code**](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+- [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [**formate: CSS/LESS/SCSS formatter**](https://marketplace.visualstudio.com/items?itemName=MikeBovenlander.formate)
+- [**Git History**](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
+- [**Import Cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
+- [**JavaScript Booster**](https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster)
+- [**npm Intellisense**](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
+- [**Prettier - Code formatter**](https://marketplace.visualstudio.com/items?itemName=esbenp)
+- [**Todo Tree**](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
+- [**Turbo Console Log**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
+- [**Package Json Upgrade**](https://marketplace.visualstudio.com/items?itemName=codeandstuff.package-json-upgrade)
+- [**Visual Studio Code Commitizen Support**](https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-commitizen)
+- [**Markdown All in One**](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
+
+## 🏁 Getting Started
+
+### Prerequisites
+
+- **Node.js**: Version 20.18.0 or higher
+
+### Installation
+
+1. **Clone the Repository**:
+
+   ```bash
+   git clone https://github.com/officiallerio/nextjs-16-starter.git
+   cd nextjs-16-starter
+   ```
+
+2. **Install Dependencies**:
+
+   ```bash
+   npm install
+   # or with Yarn
+   yarn install
+   ```
+
+3. **Run Development Server**:
+
+   ```bash
+   npm run dev
+   # or with Yarn
+   yarn dev
+   ```
+
+4. **Build for Production**:
+   ```bash
+   npm run build
+   ```
+
+### 🐳 Docker Setup
+
+To use Docker, make sure Docker is installed on your machine. Then, build and run the Docker container:
+
+```bash
+docker build . -t nextjs-16-starter
+# or if using Bun
+docker build . -t nextjs-16-starter -f Dockerfile.bun
+
+docker run -p 3000:3000 nextjs-16-starter
+```

fullstack/fullstack/app/api/posts/[id]/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { posts } from "@/data/posts";
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id: idParam } = await params;
+  const id = parseInt(idParam);
+  const post = posts.find((p) => p.id === id);
+
+  if (!post) {
+    return new NextResponse("Post not found", { status: 404 });
+  }
+
+  return NextResponse.json(post);
+}

fullstack/fullstack/app/api/posts/route.ts

@@ -0,0 +1,6 @@
+import { NextResponse } from "next/server";
+import { posts } from "@/data/posts";
+
+export async function GET() {
+  return NextResponse.json(posts);
+}