Defining a Route

The simplest pattern is just to create a directory inside the app folder with the route name and at that directory create a page.tsx file.

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               └── posts
│                   └── page.tsx
└── libste

Here is our code to fetch posts and display them:

import { ContentWrapper, Title } from '@nrp/components/server';
import Link from 'next/link';
export default async function Page() {
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts').then(
    (res) => res.json(),
  );
  return (
    <ContentWrapper>
      <Title>Posts</Title>
      <ul className="flex flex-col gap-2">
        {posts.map((post: { id: string; title: string }) => (
          <li key={post.id}>
            <Link
              href={`/posts/${post.id}`}
              className="capitalize hover:underline"
            >
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </ContentWrapper>
  );
}

Dynamic Routes

We want to navigate to a post by its id, for this, we will need to create a dynamic route. For that just create a directory with the square brackets and the name of the param inside and a page.tsx file inside that directory as follows:

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               └── posts
│                   ├── [postId]
│                   │   └── page.tsx
│                   └── page.tsx
└── libs

Here is the code for our post:

import { ContentWrapper, Paragraph, Title } from '@nrp/components/server';
export default async function Page({ params }: { params: { postId: string } }) {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  const post = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.postId}`,
  ).then((res) => res.json());
  return (
    <ContentWrapper>
      <Title className="capitalize">{post.title}</Title>
      <Paragraph className="capitalize">{post.body}</Paragraph>
    </ContentWrapper>
  );
}

Catch All and Optional Catch All Routes

To catch all routes from a directory except for the root of that directory’s route, we can use the Catch All pattern. We will add a directory with the [...slug] bracket and 3 dot annotation, the slug will be our route param in the params props, and we’ll add our page.tsx file to that directory:

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               └── catch-all
│                   └── [...slug]
│                       └── page.tsx
└── libs

Here is the code:

import { ContentWrapper, Title } from '@nrp/components/server';
export default function Page({ params }: { params: { slug: string[] } }) {
  return (
    <ContentWrapper>
      <Title>From Catch All</Title>
      <pre>{JSON.stringify(params.slug, null, 2)}</pre>
    </ContentWrapper>
  );
}

When we navigate to /catch-all we’ll get a 404 page, however, to /catch-all/next/page/etc you’ll get the page rendered as expected with array of params in the json.

The second pattern allows us to catch the root’s directory also. So we’ll create a directory with the [[...slug]] double brackets and 3 dots annotation, adding page.tsx to that folder:

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               └── optional-catch-all
│                   └── [[...slug]]
│                       └── page.tsx
└── libs

And the page.tsx code:

import { ContentWrapper, Title } from '@nrp/components/server';
export default function Page({ params }: { params: { slug: string[] } }) {
  return (
    <ContentWrapper>
      <Title>From Optional Catch All</Title>
      <pre>{JSON.stringify(params.slug, null, 2)}</pre>
    </ContentWrapper>
  );
}

Now the root directory will not return a 404 page but the page’s title and empty params array. Navigating further will result in the same behavior as previously illustrated.

Nested Layout

We can nest our routing layouts by adding a layout.tsx file to our new route. This will nest the current layout inside the parent layout file and display the current page inside the new layout children . It is a great pattern to create tabbed navigation, for example.

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               └── nested
│                   ├── password
│                   │   └── page.tsx
│                   ├── layout.tsx
│                   ├── page.tsx
│                   └── tabs.tsx
└── libs

Here is the layout.tsx code:

import { ContentWrapper, Title } from '@nrp/components/server';
import { NavigationTabs } from '@nrp/components';
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <ContentWrapper>
      <Title>I am nested layout</Title>
      <NavigationTabs
        items={[
          { title: 'Account', url: '/nested' },
          { title: 'Password', url: '/nested/password' },
        ]}
      />
      {children}
    </ContentWrapper>
  );
}

Now our page at the nested route will be rendered at the layout’s children and also the password route. What is great about that is that the layout would not cause a re-render and speed up performance navigating our spa.

If you need to re-render the layout page, consider using the template file convention: https://nextjs.org/docs/app/api-reference/file-conventions/template

Here is the page.tsx code:

import { ContentWrapper, Paragraph, Title } from '@nrp/components/server';
export default function Page() {
  return (
    <ContentWrapper>
      <Title>Account</Title>
      <Paragraph>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A architecto,
        corporis eos eum facilis incidunt libero perspiciatis provident quae
        quod. Aliquid animi at culpa, hic illo reiciendis similique? Molestiae,
        repudiandae.
      </Paragraph>
    </ContentWrapper>
  );
}

And the password’s page.tsx code:

import { ContentWrapper, Paragraph, Title } from '@nrp/components/server';
export default function Page() {
  return (
    <ContentWrapper>
      <Title>Password</Title>
      <Paragraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod
      </Paragraph>
    </ContentWrapper>
  );
}

Parallel Routes

This pattern is great to display two, or more, different pages side by side and even create a unique navigation for each page inside the joined parent page.

To do so we need to create a slot first. A slot is a directory with the @ sign and the name of the slot ie: @albums. Inside we’ll create again a page.tsx file. Let’s create the same for @users page.

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               └── parallel
│                   ├── @albums
│                   │   └── page.tsx
│                   └── @users
│                       └── page.tsx
└── libs

Here is the code for the albums page:

import { ContentWrapper, Title } from '@nrp/components/server';
export default async function Page() {
  const albums = await fetch(
    `https://jsonplaceholder.typicode.com/albums`,
  ).then((res) => res.json());
  return (
    <ContentWrapper>
      <Title size="small">Albums</Title>
      <ul>
        {albums.map((album: { id: string; title: string }) => (
          <li key={album.id}>{album.title}</li>
        ))}
      </ul>
    </ContentWrapper>
  );
}

And for the users page:

import { ContentWrapper, Title } from '@nrp/components/server';
import { Avatar, AvatarFallback, AvatarImage } from '@nrp/components';
import Link from 'next/link';
export default async function Page() {
  const users = await fetch('https://jsonplaceholder.typicode.com/users').then(
    (res) => res.json(),
  );
  return (
    <ContentWrapper>
      <Title size="small">Users</Title>
      <ul className="flex flex-col gap-4">
        {users.map(
          (user: {
            id: string;
            name: string;
            username: string;
            email: string;
          }) => (
            <li key={user.id} className="flex items-center gap-4">
              <Avatar>
                <AvatarImage
                  className="bg-foreground"
                  src={`https://robohash.org/${user.username}`}
                  alt="@shadcn"
                />
              </Avatar>
              <div>
                <p className="text-sm font-medium leading-none">{user.name}</p>
                <p className="text-sm text-muted-foreground">{user.email}</p>
              </div>
            </li>
          ),
        )}
      </ul>
    </ContentWrapper>
  );
}

Next we’ll need to add the slot in our layout. We can add a nested layout inside our parallel route or add it to the root layout as well. We create the layout.tsx file and a page.tsx for our parallel page.

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               ├── parallel
│               │   ├── @albums
│               │   │   └── page.tsx
│               │   └── @users
│               │       └── page.tsx
│               ├── layout.tsx
│               └── page.tsx
└── libs

Here is the code for the layout:

import { Title } from '@nrp/components/server';
export default function Layout({
  children,
  users,
  albums,
}: {
  children: React.ReactNode;
  users: React.ReactNode;
  albums: React.ReactNode;
}) {
  return (
    <div>
      <Title>Parallel Layout</Title>
      {children}
      <div className="flex gap-4 p-4 justify-around">
        {users}
        {albums}
      </div>
    </div>
  );
}

And our parallel route page:

import { Title } from '@nrp/components/server';
export default function Page() {
  return <Title size="medium">Parallel Routes</Title>;
}

Intercepting Routes

Sometimes we want to do a soft route on a page to just peek at it, let’s say in a Modal, and have the original route intact (for direct access, full refresh or sharing the links). So this pattern is great just for that.

Having an photos gallery and a photo by id routes we want to open the photo in a Modal dialog at the client but load the photo page at full reload and direct link sharing.

This will be the directory structure for our photo gallery:

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               ├── intercepted
│               │   └── [photoId]
│               │       └── page.tsx
│               └── page.tsx
└── libs

Now we want to intercept the /intercetped/[photoId] route. Todo so we’ll need to create a slot directory and add it to the layout, in the slot directory we’ll need to create a directory with the (.) prefix that will represent the intercepted route. (.) is for current scope, (..) for parent scope, (../..) for parent’s parent scope and (...) for root scope.

If it is a nested route we will add the routing directory structure inside this directory without the (.) prefix, only the first folder will have it. Let’s also add a layout.tsx file to hold our @modal slot.

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               ├── intercepted
│               │   ├── @modal
│               │   │   └── (..)intercepted
│               │   │       └── [photoId]
│               │   │           └── page.tsx
│               │   └── [photoId]
│               │       └── page.tsx
│               ├── layout.tsx
│               └── page.tsx
└── libs

This is the layout.tsx file code:

import { ReactNode } from 'react';
export default function Layout({
  children,
  modal,
}: {
  children: ReactNode;
  modal: ReactNode;
}) {
  return (
    <>
      {children} {modal}
    </>
  );
}

The /[photoId]/page.tsx page code:

import { ContentWrapper, Title } from '@nrp/components/server';
import { Photo } from '../../components/photo';
export default async function Page({
  params,
}: {
  params: { imageId: string };
}) {
  return (
    <ContentWrapper>
      <Title>Intercepted Route</Title>
      <div className="w-[600px] self-center">
        <Photo imageId={params.imageId} />
      </div>
    </ContentWrapper>
  );
}

The intercepted /@modal/(..)intercepted/[photoId]/page.tsx page code:

import { Photo } from '../../../../components/photo';
import { Suspense } from 'react';
import { Loader2 } from 'lucide-react';
import { Modal } from '../../../../components/modal';
export default async function Page({
  params,
}: {
  params: { imageId: string };
}) {
  return (
    <Modal title="Intercepted Route">
      <div className="min-h-[100px] flex items-center justify-center">
        <Suspense fallback={<Loader2 className="animate-spin" />}>
          <Photo imageId={params.imageId} />
        </Suspense>
      </div>
    </Modal>
  );
}

Now to make it work as expected we also need to add default.tsx files in our directory structure to signal next.js what to render in the slot of the layout if nothing was intercepted:

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               ├── intercepted
│               │   ├── @modal
│               │   │   └── (..)intercepted
│               │   │       ├── [photoId]
│               │   │       │   └── page.tsx
│               │   │       └── default.tsx
│               │   └── [photoId]
│               │       ├── default.tsx
│               │       └── page.tsx
│               ├── default.tsx
│               ├── layout.tsx
│               └── page.tsx
└── libs

Dynamic Render

Another pattern I like to use, is a Optional Catch All routes and then conditionally render the page, whether is a params presented or not. This offers me a way to handle multiple scenarios in a single page and also render always the pages as I want, even if I share them with direct link access, for example displaying a photo image in a Modal.

Here is the directory structure:

nextjs-routing-patterns
├── apps
│   └── blog
│       └── src
│           └── app
│               └── dynamic-render
│                   └── [[...slug]]
│                       └── page.tsx
└── libs

And the page.tsx code:

import { Photo } from '../../components/photo';
import { Suspense } from 'react';
import { Modal } from '../../components/modal';
import { Loader2 } from 'lucide-react';
import { Photos } from '../../components/photos';
import { ContentWrapper } from '@nrp/components/server';
export default async function Page({ params }: { params: { slug: string[] } }) {
  const [photoId] = params.slug ?? [];
  if (!photoId)
    return (
      <Suspense fallback={'Loading...'}>
        <Photos title="Dynamic Render" page="dynamic-render" />
      </Suspense>
    );
  return (
    <ContentWrapper>
      <Photos title="Dynamic Render" page="dynamic-render" />
      {photoId && (
        <Modal>
          <div className="min-h-[100px] flex items-center justify-center">
            <Suspense fallback={<Loader2 className="animate-spin" />}>
              <Photo imageId={photoId} />
            </Suspense>
          </div>
        </Modal>
      )}
    </ContentWrapper>
  );
}

Conclusion

So we see how we can use Next.js App’s directory routing patterns to achieve different approaches to our navigation system.

I hope that you found this article useful, let me know in the comments below what did you think, your suggestion and love 😍.

Today it is trivially easy to play games on a computer with one’s friends over the internet. I can log into a game like Fortnite, party up with a squad and chat in either the game’s built-in voice protocol or use another service like Discord, and be in a game within minutes. I can do this from my computer, a game console, or even my phone. But before the wide availability of high-speed internet, things were more complicated.

The following is excerpted from the book LAN Party, by Merritt K. The book is available for purchase now.

In the 1990s and early 2000s, three-dimensional graphics in videogames were becoming more and more complex. Titles like 1998’s Half-Life pushed games in more cinematic directions, with lighting and textures that went beyond anything released even a few years earlier. Other first-person shooters (FPS) like Counter-Strike (itself originally a mod for Half-Life) and Unreal Tournament built on the work of earlier titles like DOOM, Wolfenstein 3D, and Duke Nukem 3D. Many of these titles were designed for multiplayer action. However, the typically low network speeds of the period meant that these games, unlike slower-paced and less graphically intensive strategy games, were nearly unplayable over an internet connection. In this moment, in which communications technology was being outpaced by graphical power, the LAN (local area network) party was born.

The term itself conjures up strong sensory memories for those who were there—sweaty bodies packed into a basement or convention hall, a dozen CPUs noticeably warming the space, the heft of a CRT monitor being maneuvered into position. For those on the outside, these were scenes of incomprehension or ridicule. But for those who were there, the LAN party was a singular event, a defining social occasion of the early 21st century. It represented the last gasps of the isolated gamer stereotype, ushering in an age in which gaming was not only mainstream, but a social, networked activity.

Of course, people had been bringing together computers for some time prior to the Y2K era. (The demoparty, in which participants cracked code to evade copyright protection and share artistic creations, was an important antecedent to the LAN party.) But it was in this particular period—in the United States, at least—that the social and technological configuration of the LAN party became a true phenomenon. Participants hauled their monitors, towers, and peripherals to a central location, where they would set up their machines and connect them through a network switch. This local connection enabled speeds far beyond those available to the average internet user, enabling lag-free gameplay, not to mention high-speed file sharing at a time when downloading or transporting large files could be an extremely onerous task.

LAN parties ranged from small, private gatherings to massive, multi-day events with thousands of participants, such as QuakeCon, DreamHack, The Gathering, and Euskal Encounter. Both types are represented in this book, though the focus is more on the former. As accessible digital photography was emerging around the same time as LAN parties—and perhaps because computer enthusiasts were more likely than the general population to own gadgets like digital cameras—these events are extraordinarily well documented.

Gaming at the Turn of the Millennium

What do these photos show? Young people—primarily young men—goofing off and playing games, of course. But it’s more than that. Technological and cultural artifacts of the era are strewn throughout, illustrating trends, obsessions, and now-forgotten relics. One of my favorite photos in the book depicts, among other things: a Windows XP error dialogue box; a beige Microsoft keyboard; a disposable film camera; a pair of wraparound headphones that I and nearly everyone else I knew owned in the early 2000s; and a pile of burned CD-Rs, one of which has “StarCraft” written on it in permanent marker. Junk foods and caffeinated beverages appear frequently in the collection, with the energy drink Bawls Guarana in particular popping up again and again. While Mountain Dew has since acquired a reputation as the gamer beverage of choice, Bawls was certainly the unofficial sponsoring drink of the LAN party.

Some games feature prominently in the mythos of the LAN party and in the photos collected in this book. The aforementioned Counter-Strike and Unreal Tournament are two of them, being primarily team-based first-person shooters that laid the groundwork for the ongoing popularity of the genre. These games are best played with minimum latency; they each support large numbers of players and feature quick rounds, which made them big hits at LAN parties. Certain maps in these games have become iconic, celebrated and recreated in other titles—for Counter-Strike, Dust II (de_dust2) is probably the best-known, while for Unreal Tournament, it’s Facing Worlds (CTF-Face). Both of these maps are so significant, so well-remembered and influential that they have their own Wikipedia pages.

Other first-person shooters popular at turn-of-the-century LAN parties include Starsiege: Tribes, Tom Clancy’s Rainbow Six: Rogue Spear, and id’s Quake series. Quake III Arena was released in 1999 and eschewed a single-player narrative component, instead focusing on highspeed multiplayer battles. The engine developed for the game was later used for a number of other successful games, including the awkwardly titled Star Wars Jedi Knight II: Jedi Outcast, which contained a robust multiplayer mode that players built on by creating elaborate rituals around lightsaber duels.

Of course, not all of the games played at LAN parties were first-person shooters. Real-time strategy (RTS) games were also quite popular in the early 2000s, with Blizzard’s StarCraft (1998) and Warcraft III : Reign of Chaos (2002) celebrated for their intricate design, customizability, and multiplayer capabilities. These games, like many 3FPS games of the era, came with tools that made it easy for players to create their own content. This led to a boom in hobbyist developer creativity that in turn generated entirely new genres of videogames such as the multiplayer online battle arena (MOBA), later refined by immensely successful titles like League of Legends and Dota 2. Other well-loved RTS games of the era include Westwood’s Command & Conquer franchise, Ensemble’s Age of Empires series, and Creative Assembly’s Total War titles.

When it came to console gaming in the Y2K era, the Nintendo 64 set a new standard for multiplayer games with the introduction of four controller ports in 1996, and most subsequent machines followed its lead. Microsoft released the original Xbox in 2001, and its launch title, Halo: Combat Evolved, kicked off a new generation of console-based first-person shooters. In addition to featuring split-screen multiplayer, the Xbox supported a form of LAN play called System Link, which allowed up to sixteen players to play games like Halo simultaneously. The Halo series and Xbox also happened to be instrumental in the decline of the LAN party—more on that later.

Y2K Cultural Trends

Beyond games, LAN party photos also demonstrate some other cultural trends of the period. The late 90s and early 2000s saw the rise of the nu metal musical genre, which included artists like Limp Bizkit, Slipknot, Korn, and Linkin Park. These groups harnessed feelings of isolation and teenage angst and fused rock instrumentation with hip-hop style and delivery, creating a kind of music that was beloved and reviled in equal measure for its direct, unselfconscious emotional pleas, macho posturing, and nihilistic themes.

Simultaneously, anime and Japanese subcultures were becoming more popular in the US due to the introduction of shows like Dragon Ball Z and Sailor Moon on American children’s networks. The growth of the internet, too, was making it easier than ever for young people interested in anime and other niche topics to share their interests and learn more about them on message boards and webrings. Anime and nu metal often went together in the form of the animated music video (AMV), where fans would stitch together clips of their favorite shows as makeshift music videos for their favorite angsty tracks.

The influence of anime and nu metal, as well as the mainstreaming of hip-hop to white suburban audiences, the dark guns-and-leather aesthetics of the films Blade and The Matrix, skater culture, and more can be seen in many of the photos in this book—in the clothing people are wearing, the posters on their walls, and desktop backgrounds. What has today become massively mainstream—anime, gaming, comic books, and so on—was, in the early 2000s, still on the fringes of normalcy. Remember: Iron Man didn’t kick off the Marvel Cinematic Universe until 2008. Crunchyroll, the anime streaming platform, didn’t exist until 2006.

In the same vein, this period also saw the birth of meme culture online. Early internet memes like “Mr. T Ate My Balls,” “All your base are belong to us,” and l33tspeak spread through forums like Something Awful and Flash portals such as Newgrounds, giving young internet users a kind of shared secret language. In the late 2000s, as social networks like Facebook gained traction among college students and more and more people got online, meme culture gradually became mass culture.

Creative Chaos

In addition to the cultural trends of the time, these pictures also show people bringing computers into places where they didn’t traditionally belong. In the 1990s and early 2000s, bulky desktop computers often lived in home offices or even dedicated “computer rooms.” Some lucky few kids at that time had their own personal computers in their bedrooms, but in my experience, this was rare.

During LAN parties, participants brought computers into garages, basements, living rooms, and other spaces, setting them up on dining-room tables, TV trays, kitchen counters, and any available surface. The raw excitement on the part of the participants is evident in the sometimes absurd lengths they went to in order to participate in LAN parties—computer towers crammed between cushions in the back seat of a van to ensure their safe transportation across town; cables crisscrossing the floor to connect machines; CRT monitors balanced haphazardly around the room.

It’s this passion, I think, which partly explains the appeal of these photos—even to those who weren’t around at the time. This book is full of images of people being truly excited about computers and playing games on them. There’s a sense, in looking at these photos, that these people were on the cusp of something—even if they weren’t necessarily aware of it at the time. Since the home computer boom of the 1990s and the introduction of high-speed internet in the 2000s, the omnipresence of computers and communication technology has rendered them mundane to many people. It’s almost quaint to see people so genuinely thrilled to be playing PC games with their friends when, today, doing so is an everyday occurrence.

Making a LAN party happen took work. It took physical effort, technical know-how, and a willingness to hack things together. The range of computer equipment depicted in the photos is testament to that. Yes, there are the standard massive, beige CRT monitors associated with the period, but we see computer towers ranging from stock models in the same color to complex monstrosities built by enthusiastic geeks. This was before Apple’s sleek industrial design took over the tech world, before LED lights were standard on pretty much any gaming PC. It was the era of user-driven customization, and LAN parties are perfectly emblematic of that time.

The Decline Of The LAN Party

LAN parties occurred throughout the 1990s, peaked (in the US, at least) in the early-mid-2000s and began to decline in the early 2010s. Of course, people do still throw LAN parties, especially people who grew up with them, but their heyday has long since passed. So what killed the LAN party? The most obvious answer is the widespread introduction of communication infrastructure that made it possible to play games like first-person shooters over the internet with low latency.

LAN parties were a creation of circumstance, which withered away once it was no longer a necessity to transport computers to the same physical space in order to get an ideal gaming experience. It’s certainly true that it is now more convenient than ever for many people to play games online with strangers or friends. But convenience in technology often comes with a commensurate loss of control on the part of users.

In 2004, Bungie released Halo 2 for the Xbox. The game built on the original’s landmark success by introducing online play through Microsoft’s Xbox Live service. It went on to become the most popular Xbox Live title of all time and was played until the discontinuation of the service on the original Xbox in 2010.

The Xbox Live service was easy to use, popularizing the method of allowing players to party up with their friends and enter into matchmaking queues. This was a major shift from the then prevalent system of presenting players with a list of servers to join, each hosted by different players and groups. As well as being a more seamless experience emphasizing ease of use, this new model also represented a move away from user control. Matchmaking is now the dominant mode of playing multiplayer games online. There are certainly advantages inherent in it—developers can try to create fairer matchups based on skill and players can keep their ranks and reputations across games—but it also puts players at the mercy of a company’s algorithms and servers.

Many of the most popular multiplayer videogames today are entirely server-side, meaning that they cannot be played without connecting to the game’s servers. This is advantageous for developers and publishers, who can ensure that players have the latest updates, prevent cheating, and create large worlds in which numerous players can be online and interacting at once. But it also means that control of game experiences has shifted significantly away from users. Even games that have offline components often do not have any kind of peer-to-peer or private server functionality, meaning that it is impossible for a group to play them together in a LAN environment.

The way we buy and play games has also changed. Today, digital platforms like Steam and the Epic Game Store allow players to purchase titles without leaving their homes. But digital copies of games, and their management through these platforms, mean that the old practices of burning copies of games or sharing legal “spawn installations” of games to facilitate multiplayer experiences are less and less possible.

Thus, the story that LAN parties died because they were simply an obsolete social structure is a little too straightforward. It may be true that most people would prefer to play games in the comfort of their own home rather than transporting expensive and bulky equipment elsewhere, but technological and economic forces also contributed to the decline of LAN events. The fact is that the shift to digital, producer-owned environments in every aspect of gaming—from sales to play—tremendously benefits the corporations publishing and selling games, sometimes at the expense of those purchasing and playing them.

Looking Back

In the photos collected in this book, then, we can see some things that have been lost, or at least forgotten—an adventurous spirit around computing and a world in which ownership of software and play belonged more to individuals than corporations. I don’t mean to suggest that LAN parties were utopian spaces. They were, of course, mostly—but certainly not exclusively—attended and organized by young white men, and even many of the larger events were male-dominated spaces, hostile to women. Nonetheless, from my position, decades later, I can’t help but look fondly on images of LAN parties. At a time when communications technology paradoxically seems to produce a sense of disconnection for many people through algorithmically generated echo chambers and the indexing of personal worth to follower counts or likes, seeing people literally coming together with and around computers is almost aspirational.

It’s tempting to see the mainstreaming of gaming and tech as a uniformly positive trend. And certainly, more people having access to these things and feeling like they belong in associated spaces is a good thing. But there are always trade-offs. The ubiquity of, and widespread access to, tech has come with an unprecedented rise in surveillance through our devices, a loss of control over our personal data, and a sense of alienation fostered by tech companies who want to own as much of our attention as possible.

For people like me, who grew up during the 1990s and 2000s, it can sometimes feel like the exciting period of the internet and computing is over. Pictures of LAN parties represent that early era of the internet, when it was a place that you visited rather than a parallel layer of reality. As we’ve watched that mysterious, alluring, and perilous internet get progressively fenced off, paywalled, and centralized by a few massive corporations, some of us are beginning to reflect on our relationship to it.

Perhaps this thing that was so important to us in our youth, that we’ve stubbornly stuck with despite sweeping structural changes, is no longer so relevant to our lives. Maybe it’s time to start figuring out new ways to use the internet and computers to enrich our world. And maybe LAN parties can offer one model for that.

Excerpted from LAN PARTY: Inside the Multiplayer Revolution, by merritt k

Text © 2023 merritt k 

© 2024 Thames & Hudson Ltd, London

Reprinted by permission of Thames & Hudson Inc, www.thamesandhudsonusa.com