Portfolio app with nextjs, reactjs and typescript.

In this guide, we'll walk through the process of creating a portfolio app using Next.js, React.js, and TypeScript, from setting up the prerequisites to the basic steps to get you started.

1. Pre-requisites

• Basic knowledge of JavaScript and reactjs.

• Make sure you have Node.js installed on your machine, You can download and install Node.js from nodejs.org.

2. Project setup and creting a nextjs enviourment

• Create a Next.js App:

Open your terminal or command prompt and run the following command to create a new Next.js app:

npx create-next-app@latest my-portfolio --typescript --eslint
cd my-portfolio

• Once the project is created, navigate to your project directory:

• To enable TypeScript, install the required dependencies:

npm install --save-dev typescript @types/react @types/node

Make sure you have node version above 18.12.0 to run the next app.

• Run the development server

npm run dev

*3. System design *

We are going to divide this application in some steps from system design to making different components and using MVC approach.

-> System design

• After the setup of nextjs project, we are going to install require dependancies for the project we are going to setup tailwind css in the app.

npm install -D tailwindcss postcss autoprefixer

• Now configure tailwind.config.js file and replace it with this code
  `/** @type {import('tailwindcss').Config} /
  module.exports = {
  content: [
  "./app//.{js,ts,jsx,tsx,mdx}",
  "./pages//*.{js,ts,jsx,tsx,mdx}",
  "./components//*.{js,ts,jsx,tsx,mdx}",

  // Or if using src directory:
  "./src/*/.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
  extend: {},
  },
  plugins: [],
  }`

Typescript files are compile to javascript.

1. Creating pages for application

• First we will start by creating a navigation bar for the application,

• For that go to components and create a new file called Navbar.tsx

• Further, we will create a UI for it, and add list and navigation to different pages through it

• You can customize the navbar according to your need, like change the styles, removing or adding some lists.

Stay tuned for next blog on next week!

Code : https://www.buymeacoffee.com/Priyanshu7401.