Advanced Next.js Masterclass: a workshop by Atila Fassina and Smashing Magazine

Overview

uses TypeScript 4.x uses Next.js 12.x uses TailwindCSS 3.x uses Node.js 16 LTS


Setting up the system 🧱

Make sure you are running on Node.js 16 or newer.

If properly installed, Node.js will exist in your $PATH. To check the version you can then run:

node -v

In case you do not have Node.js installed, or needs a different for work, I recommend using a Node Version Manager, I recommend volta.sh.

# install Volta
curl https://get.volta.sh | bash

# install Node
volta install node

Project setup 🧬

  • Clone repository

    git clone https://github.com/atilafassina/smashing-next.git
    
  • Install dependencies with your package manager of choice (npm recomended)

npm i

💡 If using VS Code, once the project is opened it will prompt you to install a few extensions. Those are definitely not mandatory, but are likely to give you a better Developer Experience.

Once ready, you can start the project and jump into code.

npm run dev

Open http://localhost:3000 to view it in the browser (unless you switch the port manually).

Setup the database 📚

⚠️ this is just a placeholder for now. We will provision and create our own data throughout the workshop.

At the moment you have no data, if you are using Xata VS Code extension, you can connect to a database in your workspace.

Once you have a XATA_API_TOKEN in your .env or .env.local, you can push the schema and generate the client:

npm run start:xata

It will create a table on your database and push dummy data there.

You might also like...

GatsbyConf - Decoupling Drupal Using Gatsby: A Crash Course workshop

GatsbyConf - Decoupling Drupal Using Gatsby: A Crash Course workshop

Sep 29, 2022

Workshop contruyendo una API Rest con Node.js + Koa.js

Workshop contruyendo una API Rest con Node.js + Koa.js

Workshop contruyendo una API Rest con Node.js + Koa.js Tabla de Contenido Acerca de Introducción Explicación del caso de uso Ciclo de vida de las soli

Apr 8, 2022

Portuguese version of the Cassandra driver javascript node.js workshop

Versão em Português do workshop Cassandra driver javascript node.js Olá e bem-vindo! Este é o repositório complementar para a apresentação prática dos

Mar 17, 2022

A workshop about JavaScript iteration protocols: iterator, iterable, async iterator, async iterable

A workshop about JavaScript iteration protocols: iterator, iterable, async iterator, async iterable

JavaScript Iteration protocol workshop A workshop about JavaScript iteration protocols: iterator, iterable, async iterator, async iterable by @loige.

Dec 20, 2022

Here are the sources for the wdi5 workshop at UI5con 2022.

wdi5 workshop at UI5con 2022 Here are the sources for the wdi5 workshop at UI5con 2022. prerequisites please have this installed on your 'puter: Node

Oct 19, 2022

REST API for a rudimentary blog - from Prisma Day 22 NestJS workshop

NestJS Workshop Prisma Day 22 - Let's build a REST API with NestJS and Prisma! Welcome to the code repository for the Prisma Day 2022 NestJS Workshop!

Jan 3, 2023

Workshop for starknetCC (nextjs x starknetjs x cairo)

Workshop for starknetCC (nextjs x starknetjs x cairo)

NextJS - Starknet.js - Cairo • Workshop StarknetCC - Full dApp workshop by Alpha Road team You'll find the PDF presentation here Introduction This wor

Nov 8, 2022

Workshop: Crafting Human Friendly CLIs with Node.js Core

$ Crafting Human Friendly CLIs with Node.js Core █ A workshop by Simon Plenderleith & Kevin Cunningham. Getting ready for the workshop 1. Required sof

Dec 26, 2022

Tiny JavaScript library (1kB) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Zero dependency tiny JavaScript library (1kB bytes) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Nov 8, 2022
Owner
Atila Fassina
🧠 Developer, Learner, Instructor
Atila Fassina
Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.

?? Advanced Remix Workshop Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this

Frontend Masters 167 Dec 9, 2022
Matt's Advanced TypeScript workshop

Advanced TypeScript Workshop Hello! My name's Matt Pocock. This is a workshop repo to teach you about Advanced TypeScript. Topics Covered Using typeof

Matt Pocock 774 Dec 24, 2022
Matt's Advanced TypeScript workshop

Advanced TypeScript Workshop Hello! My name's Matt Pocock. This is a workshop repo to teach you about Advanced TypeScript. Topics Covered Using typeof

Total TypeScript 653 Sep 20, 2022
This is a demo of updating a map to show air quality data for the user’s current location using Next.js Advanced Middleware, powered by Netlify Edge Functions.

Show Local Air Quality Based on the User's Location Use AQI data to show the air quality near the current user. This is built using Next.js Advanced M

Jason Lengstorf 8 Nov 4, 2022
Under the Sea is an official AWS workshop delivered by AWS SAs and AWS Partners to help customers and partners to learn about AIOps with serverless architectures on AWS.

Under the Sea - AIOps with Serverless Workshop Under the Sea is an exciting MMORPG developed by the famous entrepreneur behind Wild Rydes, the most po

AWS Samples 4 Nov 16, 2022
Repository for hands on practice in Git and GitHub workshop

Git and Github Workshop Jan 2022 Successful contributors ✨ of this project will be featured on the GDSC website so as to bring attraction and learn vi

IIIT Vadodara Open Source 2 Feb 10, 2022
For this workshop, we're going to learn more about cloud computing by exploring how to use Pulumi to build, configure, and deploy a real-life, modern application using Docker

For this workshop, we're going to learn more about cloud computing by exploring how to use Pulumi to build, configure, and deploy a real-life, modern application using Docker. We will create a frontend, a backend, and a database to deploy the Pulumipus Boba Tea Shop. Along the way, we'll learn more about how Pulumi works.

Kat Cosgrove 9 Dec 29, 2022
Resources for the App.js Conf Workshop 2022 hosted by Evan Bacon and Lydia Hallie

App.js Conf 2021 React Native workshop Order of sections: up-and-going: Learn about React Native and options to start your first project. get-started:

Evan Bacon 9 Sep 14, 2022
Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. Get a jumpstart on Remix with this workshop.

?? Remix Fundamentals Build Better websites with Remix Remix enables you to build fantastic user experiences for the web and feel happy with the code

Frontend Masters 204 Dec 25, 2022
ITkonekt .NET workshop

Autobarn This is the sample application for Dylan Beattie's workshop on distributed systems with .NET. It's an Asp.NET Core web application based on v

Ursatile 1 Dec 19, 2021