Scribd
Upload
8 views

2-Creating basic Next JS app with links

Uploaded by

zeeshansuboor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

2-Creating basic Next JS app with links

Uploaded by

zeeshansuboor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

1.

After creating the folder and opening it in vs code, run following command in terminal to make a
next js app.
npx create-next-app@latest

2. Then run follwong commang to run the app;


npm run dev

Note: If webpage does not open, please run “localhost:3000” in explorer

3. Inside folder src/app the Layout.tsx contains top part of the webpage which remains consistent
while user navigates to the different pages. Basic code of the Layout.tsx is as follows;

function RootLayout(props: any){


return(
<html>
<body>
<h1>Common</h1>
{props.children}
</body>
</html>
)
}
export default RootLayout
props.children actually calls the page.tsx from root as well as other pages.

4. Inside the folder src/app the page.tsx file contains the definition of page below the layout for
the homepage of the website. Its sample code is as under;

import Link from "next/link"

function Home(props:any){

return(
<div>
<h2>This is Home page</h2>
<Link href="/about"> Zeeshan's Page </Link>

</div>
)
}
export default Home;
Note: import link as well as link tag is not mandatory here and is an alternative for HTML anchor tag.
5. Further pages inside the website are with the help of following 3 steps;
I. Add a folder inside scr/app in lower case letters. Name of this folder shall be the address of this
particular page of the website.
II. Add page.tsx file insider the folder.
III. Add following sample code inside the page.tsx file

function about(props:any){
return(
<div>
<h2>This is About page</h2>
</div>

)
}
export default about;

6. Make a folder dynamic route capable by adding [] across its name. Then by adding the following
code;

import React from "react"

export default function Mobile (props:any) {


const mobname = props.params.mobilename;
return <div>{props.params.mobilename}</div>

Here [mobilename] is the dynamic page.

You might also like