Next.js is based on react, webpack, and babel. It is an awesome tool for creating web applications and is famous for server-side rendering. Developers with knowledge of HTML, CSS, JavaScript and React can easily learn and switch to next.js.
Note: This installation is for automatic setup in which folders and files are created automatically.
Installing Next.js: Below is the step-by-step procedure for installing next.js.
Step 1: Install NodeJS. Follow one of the links to install according to your system, Windows Linux.
Step 2: Now create a folder for your project on the desktop navigate to the folder through your code editor and run the following command on the terminal.
npm init -y
npx create-next-app@latest
or
yarn create next-app
or
pnpm create next-app
This would be the folder structure after installation
Step 3: Run the Application
Write the command below to run the NextJS Application, and then open the URL in the browser.
npm run dev
After the successful run, the default page of next.js will be shown in the browser.
Let’s understand working through an example.
Example 1: In this example, we will simply print Hello. The index.js file is the main entry point of the next.js application, which means the component exported default by the index.js file gets rendered on the screen, so we have to change inside this file to render hello world on the screen.
index.js
export default function Home() { return ( <div> Hello, neveropen Learner!! </div> ) } |
Output:
Example 2: Example based on Pages. NextJS provides an awesome feature of pages, which means you can create any component same as the ReactJS, and then store it inside a directory named pages. Later whenever anyone visits the route /component, the component will render. You can clearly see what’s going on here, we are creating routing without any extra effort.
Project Structure: We are going to create three components here, this will be the folder structure.
Inside the functional component, there is a div in starting which contains some text and bold text inside the b tag.
page1.js
function Page1() { return <div>This is page1, accessed from the route <b>/page1</b> </div> } export default Page1; |
page2.js
function Page2() { return <div>This is page2, accessed from the route <b>/page2</b></div> } export default Page2; |
Create this file inside the directory dynamicpage (let say) and the component will render on the route /dynamicpage/[id] where [] denotes the place holder. The router object returned from the useRouter hook provides an attribute asPath which contains the path of the requested URL that we are accessing inside the b tag.
”[id].js”
import { useRouter } from "next/router" function DynamicPage() { const router = useRouter(); return <div>This is Dynamic Page, accessed from the route <b>{router.asPath}</b> </div> } export default DynamicPage |
Finally, here we have combined all three pages inside the entry point of next.js app
index.js
export default function Home() { return <div>This is HomePage <p> Click on this <a href='/page1'><u>Link</u></a> to Go <b>/page1</b> Route </p> <p> Click on this <a href='/page2'><u>Link</u></a> to Go <b>/page2</b> Route </p> </div> } |
Output:
