These conventions outline our development standards for Next.js projects, specifically focusing on projects using the app router for components and the pages router for API calls.
- Prioritize package usage over custom code
| import { | |
| z, | |
| ZodType, | |
| ZodObject, | |
| ZodArray, | |
| ZodOptional, | |
| ZodNullable, | |
| ZodDate, | |
| ZodCustom, | |
| ZodPipe, |
| const SIMULATIONS = 1000000; | |
| let villainDeaths = 0; | |
| for (let i = 0; i < SIMULATIONS; i++) { | |
| let villainLives = 8; | |
| let minionLives = [2, 6, 5]; | |
| for (let j = 0; j < 5; j++) { | |
| let targets = []; | |
| if (villainLives > 0) { |
| import {defineNuxtConfig} from 'nuxt' | |
| // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config | |
| export default defineNuxtConfig({ | |
| modules: ['@nuxtjs/tailwindcss'], | |
| css: ['~/assets/css/tailwind.scss'], | |
| build: { | |
| postcss: { | |
| postcssOptions: { | |
| plugins: { |
| module.exports = { | |
| plugins: { | |
| tailwindcss: {}, | |
| autoprefixer: {}, | |
| }, | |
| } |
| import { defineNuxtConfig } from 'nuxt' | |
| // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config | |
| export default defineNuxtConfig({ | |
| css: ['~/assets/css/tailwind.scss'], | |
| build: { | |
| postcss: { | |
| postcssOptions: require('./postcss.config.js'), | |
| } | |
| } |
| { | |
| "private": true, | |
| "scripts": { | |
| "dev": "nuxi dev", | |
| "build": "nuxi build", | |
| "start": "node .output/server/index.mjs", | |
| "send": "git commit -am 'update' && git push" | |
| }, | |
| "devDependencies": { | |
| "autoprefixer": "^10.4.12", |
| import Image from "next/image"; | |
| import useSWR from "swr"; | |
| import {useInView} from "react-intersection-observer"; | |
| const fetcher = (url) => fetch(url).then((res) => res.json()) | |
| export default function Collection({name, items, slug}) { | |
| const {ref, inView} = useInView({ | |
| rootMargin: '500px', | |
| triggerOnce: true, |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| {{ partial:head }} | |
| <body class="font-sans antialiased"> | |
| {{ yield:after_body }} | |
| <div id="main" @dragover.prevent @drop.prevent> | |
| <the-header | |
| :transparent="Boolean({{ alternate_header }})" | |
| {{ if show_notice }} | |
| :notice="{text: '{{ notice | smartypants }}', target: '{{ notice_target }}', color: '{{ notice_color }}'}" |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| {{ partial:head }} | |
| <body class="font-sans antialiased"> | |
| {{ yield:after_body }} | |
| <div id="main" @dragover.prevent @drop.prevent> | |
| <the-header | |
| :transparent="Boolean({{ alternate_header }})" | |
| {{ if show_notice }} | |
| :notice="{text: '{{ notice | smartypants }}', target: '{{ notice_target }}', color: '{{ notice_color }}'}" |