Next js from Development to Production — Part I

In this Series, I will share you a comprehensive Tutorial on Next js. At the end, you will be able to build your own Website like this https://chris-cybersec.dev/.

Intro

What is Next js

Next js is a flexible React Framework, that gives you the ability of building modern Application.

Modern Application, What really is that Chris !!!

Ok, wait wait wait …

Let’s code

First of all, create new Folder, for this Tutorial, let’s create NextjsTutorial Folder on my Desktop using git bash. You can easily download git from here https://gitforwindows.org/

mkdir NextjsTutorial && cd NextjsTutorial

Let’s now generate our Next js using pnpm this time. You can get it from here https://pnpm.io/ .

It's important that, it must be in lowercase.

pnpx create-next-app nextjstutorial

ok now, let’s open it on VS Code, you can use any text-editor you want.

Under package.json you see your scripts. The default Port is 3000, but this time we will use 1337 as Port.

Let’s change it as follow:

"scripts": {"dev": "next dev --port 1337","build": "next build","start": "next start --port 1337","lint": "next lint"}

Now run on your preferred Web-browser

localhost:1337

And voilà, your first Website in Next js.

Ok you feel now like a super Web Developer right !!!

Yes ok but we can do more.

Bonus

How to easily center a div using two lines of code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center a Div</title>
</head>
<body>
<div class="container">
<div class="centerMe">CENTER ME</div>
</div>
</body>
</html>
// Styling .container{
display: grid;
height: 100vh; // For Demonstration purpose
border: 1px solid blue; // For Demonstration purpose
place-content: center;
}
// or.container{
display: grid;
height: 100vh; // For Demonstration purpose
background: lightblue; // For Demonstration purpose
place-items: center;
}

Stay tuned for more content like this.

Chris

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store