Julian M. Wagner JWPapi

Next.js Project Conventions

Overview

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.

Core Principles

Prioritize package usage over custom code

	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 }}'}"

	import axios from "axios"
	import _ from "lodash"
	import * as cheerio from "cheerio"

	export default async function handler(req, res) {
	const {address, start, end} = req.query

	const tokenIds = _.range(start, end)
	const urls = tokenIds.map((tokenId) => polygonScanUrlGenerator(address, tokenId))