What is Next.js
Next.js is react framework for server rendered applications. Since increasing number of server side rendering requirements increased this library points exactly the right way for react applications.
Update — December 2019
Next.js developers created a new tool for creating next applications. That is named create-next-app.
If you are familiar with create-react-app before that tool is basically same thing for next.js application.
Lets create our project with create-next-app.
npx create-next-app your-app-name
It creates you a project folder with basic next.js project folders.
After you create your application with create-next-app it is ready to use in seconds. In total it is only 604kb.
If can read official documentation about create-next-app for more information.
Now you can start using application with changing directory to your app name with
Another useful commands create-next-app provides
Starts the development server.yarn build
Builds the app for production.yarn start
Runs the built app in production mode.
After you run yarn dev you can open your http://localhost:3000/ with your broser and you will see your first application there.
Our next application works as expected. Now you can open the project file with your favorite text editor and start changing your app as you want. 🤝
npm init -y
npm install --save react react-dom next
Now open package.json in next-project and change package.json scripts as
"test": "echo \"Error: no test specified\" && exit 1",
"build": "next build",
"start": "next start"
Then you can run with your npm client dev script
npm run devwith yarn:
Now you can open http://localhost:3000 from your favourite browser.
Since we didnt create our index.jsx in pages there will be nothing to show. Now lets create our pages/index.jsx file.
const Index = () => (
export default Index;
After you saved the code block you will see Hello Next.js text in your browser.
Here is a codesandbox example
I suggest you to use eslint configuration in your project to have make your development more faster and cleaner.
Here is my eslint configuration and related article about Next.js ESlint configuration if you want to learn more information please read.
Now lets create our second page in pages folder as ./pages/about.jsx
import React from 'react';
import Link from 'next/link';const About = () => (
export default About;
And lets update our index.jsx file as below
import React from 'react';
import Link from 'next/link';const Home = () => (
export default Home;
Here is routing example with Next.js
Since here we created our next.js application and created our first example page. It is very easy to develop your application if you want server side rendering option.
Stay tuned for next articles about Next.js
Thank you for reading this far. If you enjoyed this post, please share, comment, and press that 👏 a few times (up to 50 times). . . Maybe it will help someone.
Follow me on Medium or Github if you’re interested in more in-depth and informative write-ups like these in the future. 😀