An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
Some of Our Sources
- Simplebits
- Smashing Magazine
- Smashing Apps
- Abduzeedo
- Creative Curio
- FanExtra - PSD
- Line 25
- Web Resource Source
- Android Dissected
- Dev To
Help Webnuz
Referal links:
NextJS portfolio setting up - part 2
In the last part we had an overall look at what we would build, and I even gave you some homework to find an excellent design and analyze it into building blocks.
This article will look at setting up the project and installing all the dependencies we need.
Setting up the Next.js project
The basic Next.js set up is quite forward these days, so let's run through it.
First, open your terminal and run the following command to create a new Next.js project.
npx create-next-appOnce done, it will install the project inside a folder whose name you picked in the CLI prompt.
Navigate to this folder (in my case, next-portfolio).
cd next-portfolioIf you are eager to see it work, run npm run dev to start up the server.
However, we will look into adding Tailwind CSS. First, Tailwind is an easy way to style the application neatly.
You can also opt for regular CSS if you are unfamiliar with it.
First, install the needed dependencies:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestAfter that, run the following command to initialize a tailwind config file.
npx tailwindcss init -pOpen the project in your favorite editor and find the tailwind.config.js file.
Add the pages and components config into the content part like this:
/** @type {import('tailwindcss').Config} */module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, plugins: [],};Then we have to modify the styles/global.css to include the Tailwind imports.
@import 'tailwindcss/base';@import 'tailwindcss/components';@import 'tailwindcss/utilities';While we are at it, also remove some of the things we won't be needing:
styles/Home.module.csspages/api
And let's modify our pages/index.js file to see if Tailwind is working.
import Head from 'next/head';export default function Home() { return ( <div> <Head> <title>NextJS Portfolio</title> <meta name='description' content='Generated by create next app' /> <link rel='icon' href='/favicon.ico' /> </Head> <main className='grid place-content-center min-h-screen'> <div className='max-w-xs rounded overflow-hidden shadow-lg my-2'> <div className='px-6 py-4'> <div className='font-bold text-xl mb-2'>Next + Tailwind </div> <p className='text-grey-darker text-base'> Next and Tailwind CSS are a match made in heaven. Check out this article on how you can combine these two for your next app. </p> </div> </div> </main> </div> );}Now run your app: npm run dev and visit http://localhost:3000/ to see it in action.
Alright, that's our setup for today!
We created the project and added Tailwind to it.
Keep an eye out for tomorrow's article, where we'll dive into layouts in Next.js.
You can find the code for today on GitHub.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
Original Link: https://dev.to/dailydevtips1/nextjs-portfolio-setting-up-part-2-300c
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To