Although I have been aware of React and Next.js for some time, dipping in and out by creating small demo applications.
Given the benefits of Next.js; a framework built around React offering, full-stack development, server-side rendering, faster and better SEO, image optimization using Image component and much more, I have recently decided to go all in by upgrading my blogging site to use Next.js
Installation
As a pre-requisite, I assume that you have node.js installed, if not head over to https://nodejs.org/en to download an install.
Navigate to your projects folder or where you want to install (create-next-app will create a new folder with the name of your application)
Open a new terminal and type.
npx create-next-app@latest [project-name] [options]
Answer the questions regarding the set-up, starting with the name of your application, in my case my-blog.
Would you like to use TypeScript?
I chose yes for this as I'm a big fan of Typescript given my Angular experience.
Would you like to use ESLint?
Yes, I always like linting in my projects, keeping things consistent.
Would you like to use Tailwind CSS?
I have not used Tailwind before, but I hear great things about it, and I love CSS so I will need to explore this further, so it’s a no for now.
Would you like your code in a 'src/' directory?
I'm going with a no for this one.
Would you like to use App Router?
As it is recommended and is better for dynamic routing, data fetching, default server components, I have gone with yes, however I would also like to cover Page Router later as it would be better for static pages and smaller applications as well as older Next.js applications.
Would you like to use Turbopack for 'Next dev'?
Again, not used or familiar with, but worth a look in future, so no for now
Would you like to customize the import alias ('@/*')?
No - I'll keep the default behavior, thank you.
npx create-next-app creates your new application installs the below files and folder structure.
Run the application by navigating to your application root folder in your terminal and typing,
npm run dev
Open your browser to localhost:3000 to see your running application.
Cover photo by GoldDuck on Freeimages.com